且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在iOS和Android设备上,浏览器滚动事件的播放频率不高

更新时间:2021-12-01 07:47:34

iOS 8之前版本

这不是滚动事件被解雇的问题。相反,iOS上的浏览器在滚动手势的中间停止刷新(即重新绘制)屏幕。

It's not an issue of the scroll event being fired enough. Instead, browsers on iOS stop refreshing (i.e. "repainting") the screen while in the middle of a scroll gesture.

Safari WebKit,它是HTML呈现组件根据Apple的政策强制性地在所有iOS浏览器中使用,在滚动手势期间停止重新绘制以节省电池寿命并减少热量。请注意,即使屏幕无法反映在滚动手势期间对DOM进行的任何实时更改,JavaScript也会在滚动手势期间在后台继续正常运行。一旦手势结束,立即触发绘制事件,并且屏幕更新。但是,定时器循环(例如通过 setInterval 设置的循环)在滚动手势期间不会触发。

Safari WebKit, which is the HTML rendering component that is mandatorily used in all iOS browsers per Apple's policy, halts repainting during scroll gestures to conserve battery life and reduce heat. Note that JavaScript does continue to function normally in the background during a scroll gesture, even if the screen can't reflect any real-time changes that were made to the DOM during a scroll gesture. As soon as the gesture ends, a paint event is immediately fired, and the screen updates. However, timer loops, such as those that are setup via setInterval, do not fire during scroll gestures.

它是另外值得注意的是,如果在启动滚动时手指移动速度非常慢,滚动手势直到您将手指移动距离其起始位置大约10个像素后才会生效。在此10像素半径范围内移动期间,屏幕会立即继续刷新。 WebKit决定您的手指移动到足以启动滚动的那一刻,屏幕刷新将被禁用,直到滚动手势结束。

It's also worth noting that if you move your fingers very slowly when initiating a scroll, the scroll gesture doesn't take effect until after you've moved your finger approximately 10 pixels away from its starting position. During movement within this 10-pixel radius, the screen continues to be refreshed instantaneously. The moment that WebKit decides that your finger has moved far enough to initiate scrolling, screen refreshes are disabled until the scrolling gesture ends.

此问题不会影响一些网页或JavaScript库是他们有效地冻结页面的滚动,而是通过拦截触摸事件模拟滚动,然后相应地调整 body.scrollTop 属性。它们通过将事件处理程序附加到 onscroll 事件来冻结页面的滚动,并发出 event.preventDefault()命令来自事件处理程序。

The reason this problem doesn't affect "some" web pages or JavaScript libraries is that they effectively "freeze" the page's scrolling, and instead emulate scrolling by intercepting touch events and then adjusting the body.scrollTop property accordingly. They freeze the page's scrolling by attaching an event handler to the onscroll event, and issue an event.preventDefault() command from within the event handler.

iOS 8及更高版本:

Apple是在iOS 8中使滚动事件更加流畅:

Apple is making the scroll event more fluid in iOS 8:

http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/