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

Question

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

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

有什么方法可以在scroll()拖动触摸时向下滚动(向下/向上)触发事件？

示例代码:

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

最后,这是一个演示页面(不能在移动设备中使用JSFiddle,因此我将其托管在其他地方).请在桌面和移动浏览器上试用.为方便起见,这里是二维码:

Answer 1

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

我尝试过很多方法，例如放置setInterval或requestAnimationFrame循环或捕获scroll或touchmove网络工作人员或其他方法。我可以告诉你，在 iOS 4 - 7 上什么都不起作用，浏览器只是冻结任何脚本执行。Android、移动 Chrome、Firefox 或 Dolphin 浏览器跟踪scroll良好，因此您可以在那里处理滚动动量。最新的互联网浏览器手机、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 Paralax 演示。还有一些其他示例可用。

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

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

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

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

希望这对你有用！