在iOS和Android设备上，浏览器滚动事件不够频繁。

Question

我正在使用jQuery、Greensock和Scrollorama开发一个单页网站。

它不一定需要支持移动浏览器，但如果能在iPad上工作就更好了，因此我开始在各种移动设备上进行测试。

我遇到的问题是，Scrollorama依赖于滚动事件被频繁触发，因为这是动画所依赖的，但是当使用触摸屏幕时，浏览器似乎只会在开始拖动和停止时触发滚动事件——这在Opera Mini、Chrome、Safari、FF Mobile上都是一致的。

为了让我的页面至少部分工作，我需要想出一些方法让我更频繁地触发滚动事件——有人知道怎么做吗？

P.S. 我尝试使用iScroll作为scrollorama文档中建议的，但那没有效果，反而破坏了动画并使滚动变得不可能——我相信插件本身是有效的，但似乎与我已经有的东西不兼容。我正在寻找比插件更简单的解决方案，最好是一个触发滚动事件的代码片段。

总结：

使用触摸屏幕的设备似乎只会在拖动时触发一两次JavaScript滚动事件。有没有一个简单的JS或jQuery补丁可以让滚动事件更频繁地触发呢？

---

更新：我尝试通过挂接触摸事件并使用它们来触发浏览器滚动，如下所示：

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

使用Firefox在Android上似乎可以得到更好的结果，尽管我认为它没有像我希望的那样频繁触发，但总比没有要好。

我会在其他浏览器中进行测试，看看是否有所改善。

更新2：

以上代码对Android上的Firefox非常有帮助，但对iPhone没有用。我尝试添加iPhone触发的手势事件处理程序，但没有任何改变。

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

- totallyNotLizards

Answer 1

iOS 8 之前：

这不是 scroll 事件触发不够的问题。相反，iOS 上的浏览器会在滚动手势中停止刷新（即“重新绘制”）屏幕。

Safari WebKit 是 HTML 渲染组件，根据苹果公司的政策，所有 iOS 浏览器都必须使用它，它在滚动手势期间停止了重新绘制，以节省电池寿命和降低热量。请注意，在滚动手势期间 JavaScript 仍然可以在后台正常运行，即使屏幕无法反映在滚动手势期间对 DOM 所做的任何实时更改。一旦手势结束，立即触发绘制事件，屏幕更新。然而，计时器循环，例如通过setInterval设置的计时器，不会在滚动手势中触发。

还值得注意的是，如果您在启动滚动时移动手指非常缓慢，则在将手指从其起始位置移动约 10 像素后才会生效滚动手势。在此 10 像素半径内的移动期间，屏幕将立即刷新。WebKit 决定您的手指移动足够远以启动滚动的那一刻，屏幕刷新将被禁用，直到滚动手势结束。

这个问题不会影响“某些”网页或 JavaScript 库，因为它们有效地“冻结”了页面的滚动，并通过拦截触摸事件并相应地调整body.scrollTop属性来模拟滚动。它们通过将事件处理程序附加到onscroll事件来冻结页面的滚动，并在事件处理程序内部发出event.preventDefault()命令。

iOS 8 及更高版本：

苹果公司在 iOS 8 中使滚动事件更加流畅:

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

- Dejay Clayton

---

我很高兴听到这开始发生变化了，我从来没有找到解决方法，只能将其保持原样。如果运行iOS8的设备可以顺利工作，那就太好了 :) - totallyNotLizards

@G.Mart，不幸的是我从未找到过这样的解决方案，我们只能放弃支持触摸屏的项目。18个月后现在可能更有可能实现了，因为我注意到scrollorama已经进行了重大更新-也许这会对你有所帮助：http://johnpolacek.github.io/superscrollorama/simpledemo_mobile.html - totallyNotLizards

有没有一种方法可以检测到在滚动过程中屏幕没有刷新？ - Daniel

Answer 2

在我的端上，我已经禁用了 iOS Chrome 的该功能。

// Fix Chrome iOS
if(!navigator.userAgent.match('CriOS')){
    // do my stuff here      
}

我不知道完整的浏览器列表，哪些在滚动时不会刷新屏幕。如果有人能帮忙的话 ;)

- Daniel