移动浏览器中$（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跟踪scroll，因此您可以处理动态滚动。最新的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提供另一种样式或标记。您可以使用媒体查询或浏览器检测。请在线查找一些演示，因为作者没有提供明确的文档。示例：stellar.js iOS Paralax演示。还有其他一些例子可供使用。

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

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

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

在requestAnimationFrame循环中触发此内容。遗憾的是，与在此版本的库中使用WebKitCSSMatrix相比，您无法以更优雅的方式获取滚动坐标。但你可以提出拉动请求。

希望这对你有用！

Answer 2

你可能想用这个：

document.addEventListener("touchmove", touchScrollHandler, false);