移动端 Scroll Event 思考

[pfan123]

移动端 Scroll Event 思考

在移动端，我们遇到页面滚动 CSS3 animation 停止/ JS 挂起的情况，其实主要是移动端出于对性能的考虑，相当于自带防抖的功能，scroll 事件是在滚动停止之后才触发。

Android scroll

Android 4.0 及以下（主要是Android <= 2.3）的scroll事件不会实时滚动结束之后才执行，但Android 4.1之后scroll事件和PC几乎没什么区别

The Android browser in Ice Cream Sandwich fires the event but doesn’t feel very responsive and only sporadically re-paints the DOM to move the blue box. Luckily, Jelly Bean’s Android browser handles this example perfectly; everything is updated and rendered smoothly as the user scrolls.

IOS scroll

iOS < 8 滚动事件暂停了 CSS3 animation / JS scroll 事件，结束之后才会执行。

And keep in mind that we’re not just talking about the scroll event. iOS < 8 pauses all JavaScript execution during scrolling. Therefore, any intervals you create with setInterval() are also paused.

总结

通常使用scroll事件，场景常见于吸顶效果、滚动动画等。滚动吸顶由于目前 Android 与 iOS 对 scroll 事件改变滑动时实时触发，那么我们可以通过实时判断dom滚动高度做是否吸顶，不会出现抖动，而出于性能考虑，减少重新渲染重排和重绘，建议 iOS 使用 sticky 实现兼容性 iOS 以上。滚动动画这块，scroll事件变更之后，滚动动画不会挂起。

参考资料：

onscroll Event Issues on Mobile Browsers

Why the Scroll Event Change in iOS 8 is a Big Deal