jquery - 使用 jQuery 检测 iPad 上的滚动仅在滚动停止时有效

Question

我正在 iPad 上测试此网站: http://www.cherrystoneauctions.com/test

当您向下滚动页面足够远，使带有蓝色大理石背景的导航按钮位于 View 区域顶部上方时，我会重新定位这些菜单，以便它们“粘”在屏幕顶部:

$(window).on('scroll', function(){
    if ($('html').offset().top<-116){
        $('#fixnav').addClass('fixed');
    } else {
        $('#fixnav').removeClass('fixed');
    }
});

如果您向后滚动，它们会像平常一样“脱离”。

这在计算机屏幕上运行得很好，但在 iPad 上，“滚动”事件只有在滚动停止时才会触发。因此，如果你用手指轻弹屏幕，它就会滚动，一旦滚动停止，它就会计算固定/非固定导航菜单……这看起来不太好。我需要它基本上不断地计算，因此当滚动超过 116 像素时，它会立即修复/取消修复菜单。

有什么办法可以让这个触发器在 iPad 上运行得更顺畅吗？谢谢!

Answer 1

我对此的解决方法是使用触摸事件而不是滚动事件。基本思想是:

1. 检测手指何时点击屏幕(touchstart)并保存其 x/y 坐标。我还节省了时间，这样我就可以尝试检测用户在做什么。
2. 检测手指何时移动并记录其移动到的位置 (touchmove)。当手指移动时，您可以将其用作伪滚动事件处理程序。您会考虑当前的 scrollTop() 值以及用户移动手指的距离。将这些加在一起就可以得到伪滚动位置。
3. 检测手指何时离开屏幕表面并进行清理，例如删除为此卷轴获取的数据，以便下次可以重新开始。

希望有帮助。在此过程中会有一些警告，但我们非常欢迎您回来在 Stack Overflow 上提出这些问题。