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

IT技术 javascript jquery ios events scroll
2021-03-12 09:55:23

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

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

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

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

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

任何帮助家伙?

3个回答

使用 jQuery:

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

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

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

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

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

这在使用 chrome 设备工具栏(并通过单击鼠标和拖动滚动)时似乎有效,但实际上不适用于移动设备。
2021-05-07 09:55:23
不知道我做错了什么,但这个解决方案对我来说比滚动事件更糟糕......
2021-05-15 09:55:23
这看起来很有希望,我将在我的应用程序上对其进行测试,然后接受答案(如果有效)。实际上,从技术上讲,您应该已经回答了问题并且演示可以正常工作。好的,我现在就接受。
2021-05-16 09:55:23

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

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

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