移动设备上的 jQuery 实时滚动事件(解决方法) [英] jQuery live scroll event on mobile (work around)

问题描述

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

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).

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

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.

我确定某处有解决方法，如果我是正确的，此限制是由 iOS 设置的，并且在过去几年中一直在讨论.

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.

我已经尝试实现原生滚动模拟器，但它们似乎都没有按照我想要的方式工作，老实说，如果我真正想要的是一个持久的 scrollTop() 而一个用户正在滚动.

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.

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

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.

有什么帮助吗?

推荐答案

使用 jQuery:

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

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

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.

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

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

$('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

这篇关于移动设备上的 jQuery 实时滚动事件(解决方法)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！