Question

我正在使用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');
    });

Answer 1

iOS 8之前版本

这不是滚动事件被解雇的问题。相反，iOS上的浏览器在滚动手势中停止刷新（即＆＃34;重新绘制＆＃34;）屏幕。

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

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

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

iOS 8及更高版本：

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

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

Answer 2

在我这边，我禁用了ios Chrome的功能

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

我不知道在滚动时不刷新屏幕的完整导航器列表。如果有人可以提供帮助;）

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

2 个答案: