移动浏览器中$(window).scroll事件的触发率 [英] Firing rate of $(window).scroll event in mobile browser

问题描述

我使用$(window).scroll()事件将动画添加到元素中.

I use $(window).scroll() event to add animations to my elements.

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

• In desktop browsers, the event is fired when mouse is scrolling.
• In mobile browsers, the event is fired when drag & touch has ended.

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

Is there any way to make the scroll() event fires when the touch is dragging (to scroll down/up) ?

示例代码:

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

最后，这是一个演示页面(无法在移动设备中很好地使用JSFiddle，因此，我将其托管在其他位置).请在台式机和笔记本电脑上尝试移动浏览器.为方便起见，以下是QR码:

Last, here is a demo page (can't use JSFiddle well in mobile, thus I host it elsewhere). Please try it on Desktop & Mobile browsers. For your convenience, here is the QR code:

推荐答案

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

I've been playing with catching scroll realtime on most popular browsers on mobile and touch devices for over a week!

我尝试了许多方法，例如放置setInterval或requestAnimationFrame循环或捕获scroll或touchmove或网络工作者，等等.我可以告诉你，在iOS 4-7上没有任何效果，浏览器只会冻结任何脚本执行.适用于Android，移动Chrome或Firefox或Dolphin的浏览器可以很好地跟踪scroll，因此您可以在其中处理动量滚动.最新的Internet Explorer移动版，Blackberry，Opera移动版和大多数Symbian浏览器也跟踪scroll.

I have tried many approaches like putting setInterval or requestAnimationFrame loop or catching scroll or touchmove or web workers or whatever. I can tell you that nothing works on iOS 4 - 7, the browser just freezes any script execution. Browser for Android, mobile Chrome or Firefox or Dolphin track scroll well, so you can deal with momentum scrolling there. Latest internet explorer mobile, Blackberry, Opera mobile and most Symbian browsers track scroll as well.

但是，有一种在iOS上做事的绝妙方法.这个人使用CSS3 transform: translateY模拟滚动: https://github.com/joehewitt /scrollability/blob/master/scrollability.js 实际上，javascript/CSS完全模仿了iOS Safari的本机功能.

There is a brilliant way to do things on iOS, however. This guy emulates scroll using CSS3 transform: translateY: https://github.com/joehewitt/scrollability/blob/master/scrollability.js Actually, javascript/CSS fully emulate what iOS Safari does natively.

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

This works without any lags because of using GPU accelerations and has no restrictions. You can even change scroll parameters like friction or responsivity. The downside is that you need to serve another styles or markup for iOS only. You can use media queries or browser detection for this. Please find some demos online, because the author provides no clear documentation. Example: stellar.js iOS Paralax demo. There are some other examples available.

要跟踪当前滚动位置，请使用类似以下内容的内容:

To track the current scroll position use something like this:

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

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

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

Fire this inside requestAnimationFrame loop. Unfortunately you can't fetch the scroll coordinates in a more elegant way than using WebKitCSSMatrix in this version of library. But you can make a pull request for this.

希望这对您有用！

这篇关于移动浏览器中$(window).scroll事件的触发率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！