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

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

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

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

为了使我的页面至少部分工作,我需要提出一些让我更频繁地触发滚动事件的东西 - 有谁知道怎么做？

PS我已经尝试使用iScroll作为scrolllorama文档建议,但是这不起作用而是打破了动画并使滚动变得不可能 - 我确信插件本身有效,但它似乎不适合我'已经有了.我正在寻找比插件更少参与的东西,只是一个理想情况下触发滚动事件的片段.

TL; DR

具有触摸屏的设备似乎仅在拖动期间触发一次或两次javascript滚动事件.我可以用JS或jQuery做一个简单的补丁,它会更频繁地触发滚动事件吗？

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

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

这似乎在Android上使用Firefox给我带来了更好的结果,虽然我不认为这种情况经常发生,因为我觉得它比什么都没有好.

我将在其他浏览器中测试,看看这是否有帮助.

更新2:

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

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

Dejay Clayto.. 9

iOS 8之前:

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

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

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

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

iOS 8及更高版本:

Apple正在iOS 8中使滚动事件变得更加流畅:

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