很多时候我们在web上做动画一般都是选择滚动事件来触发。因为动画需要判断是否处于视口内，或者是否到达某个临界点。而滚动在不同的浏览器中，不同操作系统中的实现都有不同。这些就是我们需要注意的坑~
滚动的触发频率
在我们先入为主的思想中，我们总觉得滚动事件是每PX都会触发。但是事实并非如此:
下面请看demo:- chrome 移动端滑动模拟，速度是比较慢速的滑动。
- ios UIwebview (uc qq) 回调事件需要在滚动完成时触发。
在 iOS UIWebViews中, 在视图的滚动过程中，scroll 事件不会被触发；在滚动结束后，scroll 才会触发. Safari 和 WKWebViews不受此bug影响。--MDN events/scroll
- Android chrome
但是滚动触发事件与滚动距离以及完成的时间有关。有些浏览器还有惯性滚动的处理，所以并不能一概而论说触发一定是每秒60帧的频率
只是想说明，滚动事件的触发频率不是按照PX滚动的距离
-
element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数-
document.body.scrollTopchrome不适用 -
document.documentElement.scrollTopchrome适用 - 推荐获取滚动值
document.body.scrollTop + document.documentElement.scrollTop因为两者只有一个生效
-
-
window.scrollY返回文档在垂直方向已滚动的像素值。IE9不支持
滚动的模拟
因为滚动事件的兼容性，有一些曲线救国的模拟滚动出现啦，当然，会牺牲一定的性能。
在移动端有touch事件，包含： touchstarttouchendtouchmovetouchcancel
方向和距离
通过监听start,end事件。对开始和结束时pageX,pageY进行计算来判断滚动的方向，并获得滚动距离。
位置的移动
获取方向和距离之后，我们就可以在touchmove的回调中通过requestAnimationFrame或setTimeout来设置触发的频率（时间间隔）。位置的移动通过改变元素的transform:translate来实现，之所以不使用left，是因为使用CSS3的位置变化会让设备开启硬件加速，性能比使用left高。
再说几句
减少回调执行时间
因为滚动事件在大部分设备和浏览器中触发的频率十分高，所以我们可以通过节流处理来减少滚动事件中回调函数的执行次数。
减少回调中DOM操作
因为滚动事件的触发很快，相对于DOM的操作是非常迅速的，所以在回调事件中如果对于DOM有很复杂的操作，这时候你会发现一些用户体验不好的现象，比如闪动，卡顿，位置抖动等....但是没办法，有时候要实现这个功能，也只有这一个办法，哭唧唧~~
滚动动画
有时我们需要做一个返回顶部，或者滚动到页面中的位置的功能。这时候直接改变scrollTop，整个过程会非常的突兀，这时候我们可以通过Tween.js来实现滚动的ease,easein这些类型的动画。
献上代码：// 二次方 缓速动画 easeout模式 /* * t {number} 开始时间 * b {number} 开始位置 * c {number} 结束位置 * d {number} 结束时间 */ function QuadEaseOut(t, b, c, d) { return -c * (t /= d) * (t - 2) + b; } // 判断是否有requestAnimationFrame if (!window.requestAnimationFrame) { requestAnimationFrame = function (fn) { setTimeout(fn, 17); }; } /* * target {string} 目标DOM的ID */ function scrollAnimation(target) { var startPosition = document.documentElement.scrollTop + document.body.scrollTop; var toTarget = document.getElementById(target).offsetTop - startPosition; var endTimer = 400; var startTimer = 0; var step = function () { document.documentElement.scrollTop = QuadEaseOut(startTimer, startPosition, toTarget, endTimer); document.body.scrollTop = QuadEaseOut(startTimer, startPosition, toTarget, endTimer); startTimer += 20; if (startTimer <= endTimer) { // 继续运动 requestAnimationFrame(step); } else { // 动画结束 } }; step(); }