移动设备上的 jQuery 实时滚动事件(解决方法)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18753367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 22:25:39  来源:igfitidea点击:

jQuery live scroll event on mobile (work around)

javascriptjqueryioseventsscroll

提问by Franky Chanyau

The age old problem: Getting the scroll event to fire while a user is scrolling on an element while on a mobile site or app(web view).

古老的问题:当用户在移动网站或应用程序(网络视图)上滚动元素时触发滚动事件。

All I'm looking for is access to the correct scrollTop()value while a user is scrolling my page on a mobile device instead of getting it when the user stops.

我正在寻找的只是scrollTop()在用户在移动设备上滚动我的页面时访问正确的值,而不是在用户停止时获取它。

I'm sure there is a workaround somewhere, if I'm correct this limitation is set by iOS and there has been discussion over it for the past few years.

我确定某处有一个解决方法,如果我是正确的,这个限制是由 iOS 设置的,并且在过去几年里一直在讨论它。

I've tried implementing native scroll emulators but none of them seem to be working how I want and to be honest it seems like overkill if all I really want is a persistent scrollTop()while a user is scrolling.

我已经尝试实现本机滚动模拟器,但它们似乎都没有按照我想要的方式工作,老实说,如果我真正想要的只是scrollTop()在用户滚动时保持持久性,这似乎有点矫枉过正。

I'm currently thinking about maybe starting a counter on touchStart and stopping it on touchStop but something tells me I'm wasting my time.

我目前正在考虑可能在 touchStart 上启动一个计数器并在 touchStop 上停止它,但有些东西告诉我我在浪费时间。

Any help guys?

任何帮助家伙?

回答by Thanos Siopoudis

With jQuery:

使用 jQuery:

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

This should give you a consistent stream of the scrollTop value when the user scrolls, but be careful as it's going to fire even while the user is just holding his finger on the screen.

这应该会在用户滚动时为您提供一致的 scrollTop 值流,但要小心,因为即使用户只是将手指放在屏幕上,它也会触发。

Note that if you're using jQuery >= 1.7 the preferred binding method is .on()instead of the .bind()method I've used in my example. In that case my example would be

请注意,如果您使用 jQuery >= 1.7,首选绑定方法将 .on()代替.bind()我在示例中使用的方法。在那种情况下,我的例子是

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

来源:https: //github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

回答by urz0r

maybe you could take a look at how iScrolldoes it in their _move-method which is bound to the touchmoveevent: https://github.com/cubiq/iscroll/blob/master/src/core.js#L152

也许你可以看看iScroll如何在他们_move绑定到touchmove事件的方法中做到这一点:https: //github.com/cubiq/iscroll/blob/master/src/core.js#L152

It's a bit complicated but i'm sure you'll figure it out. You could also just use iScroll to begin with and bind to their scrollmove event (I'm not sure how it's called on iScroll 5 but it was onScrollMovein iScroll 4). that.ywill then give you the correct value.

这有点复杂,但我相信你会弄明白的。您也可以使用 iScroll 开始并绑定到他们的 scrollmove 事件(我不确定它是如何在 iScroll 5 上调用的,但它onScrollMove在 iScroll 4 中)。that.y然后会给你正确的值。

回答by Melinda Weathers

I had to go the iScroll route to do this. I wrote up my implementation here: https://stackoverflow.com/a/23140322/229315

我必须走 iScroll 路线才能做到这一点。我在这里写了我的实现:https: //stackoverflow.com/a/23140322/229315