在iOS和Android设备上，浏览器滚动事件的播放频率不高 [英] Browser scroll event doesn't fire often enough on iOS and Android devices

问题描述

我正在使用jQuery，greensock和scollorama开发一个单页的网站。

I'm developing a one-page site using jQuery, greensock and scollorama.

它不需要支持移动浏览器，但它会很好，如果它可以在iPad上工作 - 所以考虑到这一点我开始测试各种手机和平板电脑。

It doesn't exactly need to support mobile browsers but it would be nice if it would work on the iPad - so with that in mind I started testing on various mobiles and tablets.

我遇到的问题是scrollorama依赖于经常被触发的滚动事件，因为这是动画被连接到的 - 但是，当使用触摸屏时，浏览器似乎只在你开始拖动和停止时触发滚动事件 - 这是一致的整个Opera Mini，Chrome，Safari，FF Mobile。

The problem I ran into is that scrollorama relies on the scroll event being fired fairly often as this is what the animations are hooked into - however, when using a touch screen, the browsers only seem to fire the scroll event when you start the drag and when you stop - this is consistent across Opera Mini, Chrome, Safari, FF Mobile.

为了让我的页面至少部分工作，我需要想出一些能让我触发滚动事件的东西更常见的是 - 有没有人知道怎么做？

To get my page to atleast partially work, I need to come up with something that will let me fire the scroll event more often - does anyone know how?

PS我已尝试使用iScroll作为卷轴文档提示，但是这不起作用而是打破了动画并进行了滚动不可能 - 我确定插件是它的精灵工作，但它似乎不适合我已经得到的东西。我正在寻找比插件更少参与的东西，只是一个理想的触发滚动事件的片段。

P.S I've tried using iScroll as the scrollorama docs suggest, however that didn't work and instead broke the animations and made scrolling impossible - I'm sure the plugin itself works but it doesn't seem to work well with what I've already got. I'm looking for something less involved than a plugin, just a snippet to trigger the scroll event ideally.

TL; DR

带有触摸屏的设备似乎只会在拖动过程中触发一次或两次javascript滚动事件。是否有一个简单的补丁，我可以在JS或jQuery中更频繁地触发滚动事件？

Devices with touch screens seem to only fire the javascript scroll event once or twice during a drag. Is there a simple patch I can do in JS or jQuery which will fire the scroll event more often?

更新：我已尝试连接触摸事件并触发浏览器滚动，如下所示：

Update: I've tried hooking into the touch events and triggering browser scroll with them like so:

    $(document).on('touchstart touchend touchmove', function(){
        $(window).trigger('scroll');
    });

这似乎让我在Android上使用Firefox获得了更好的结果，尽管我不认为它会被解雇通常我喜欢它比没有更好。

This seemed to give me better results on Android using Firefox, although I don't think it's firing as often as I'd like it's better than nothing.

我将在其他浏览器中测试，看看是否有帮助。

I'll test in other browsers and see if this helps.

更新2：

以上代码在Android上的FF上有很多帮助，但在iPhone上却没有。我尝试为iPhone触发的手势事件添加处理程序，但没有变化。

The above code helped alot on FF on Android, but not on iPhone. I tried adding handlers for gesture events that iPhone fires, but no change.

$(window).on('touchstart touchend touchmove mousewheel touchcancel gesturestart gestureend gesturechange orientationchange', function(){
        //alert($(window).scrollTop());
        $(window).trigger('scroll');
    });

推荐答案

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/

这篇关于在iOS和Android设备上，浏览器滚动事件的播放频率不高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！