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