jquery - 移动浏览器中 $(window).scroll 事件的触发率

Question

我使用 $(window).scroll() 事件向我的元素添加动画。

• 在桌面浏览器中，当鼠标滚动时会触发该事件。
• 在移动浏览器中，当拖动和触摸结束时会触发该事件。

有没有办法让 scroll() 事件在触摸拖动(向下/向上滚动)时触发？

示例代码:

$(window).scroll(function(){
  console.log('fired');
});

最后，这是 demo page (无法在移动设备上很好地使用 JSFiddle，因此我将其托管在其他地方)。请在桌面和移动浏览器上尝试。为了您的方便，这里是二维码:

Answer 1

我在移动和触摸设备上最流行的浏览器上实时捕捉滚动已经一个多星期了!

我尝试了很多方法，例如放置 setInterval 或 requestAnimationFrame 循环或捕获 scroll 或 touchmove 或网络工作人员管他呢。我可以告诉你，在 iOS 4 - 7 上什么都不起作用，浏览器只是卡住任何脚本执行。 Android、移动 Chrome 或 Firefox 或 Dolphin 浏览器可以很好地跟踪滚动，因此您可以在那里处理动量滚动。最新的 Internet Explorer 手机、Blackberry、Opera 手机和大多数 Symbian 浏览器也可以跟踪 scroll。

然而，在 iOS 上有一种绝妙的方法。这家伙使用 CSS3 transform:translateY 模拟滚动:https://github.com/joehewitt/scrollability/blob/master/scrollability.js实际上，javascript/CSS 完全模拟了 iOS Safari 本身的功能。

由于使用 GPU 加速，因此不会出现任何延迟，并且没有任何限制。您甚至可以更改滚动参数，例如摩擦力或响应度。缺点是您需要仅为 iOS 提供其他样式或标记。您可以为此使用媒体查询或浏览器检测。请网上找一些demo，因为作者没有提供明确的文档。示例:stellar.js iOS 视差演示。还有一些其他示例可用。

要跟踪当前滚动位置，请使用如下内容:

var page = document.getElementById('page'); 

var scrollTop = isIOS ?
    -(new WebKitCSSMatrix(getComputedStyle(page).webkitTransform)).m42 : 
    window.scrollY;

在 requestAnimationFrame 循环中触发它。不幸的是，您无法以比在此版本的库中使用 WebKitCSSMatrix 更优雅的方式获取滚动坐标。但您可以为此提出拉取请求。

希望这对您有用!