Question

我正在构建一个Web应用程序，我禁用了OS X和iOS的反弹效果，但仍然需要用户能够滚动。

所以我最终使用这个CSS技巧来实现：

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

它工作得很好（虽然不如没有技巧那么顺利 - 任何建议？）。鉴于我禁用了html上的滚动，我知道我必须将.scroll（）绑定到正文：

$('body').scroll(function() {
    doSomething();
});

但问题是，我需要检测用户在中滚动多少，我似乎无法弄清楚如何做到这一点。

var doSomething = function(){ var scrollTop = $('body').offset().top; // returns 0. var scrollTop = $('body').scrollTop(); // returns 0 as well. };

任何人都可以帮助我吗？谢谢！

Answer 1

最简单的解决方案：

最简单的方法就是检查身体内部顶部元素的位置：

Here's the codepen

$(function(){
    $('body').scroll(function(){
        // Substitute your first element for 'header.main'
        console.log( $('header.main').position().top ); 
    });
});

另一种方法：

或者您可以添加如下所示的包装元素：

我能够通过在体内添加另一个元素包装并检查其位置来获得正确的偏移量。

Here's the codepen

<body>
  <div id="offset">
    <!-- all of your content in the "offset" wrapper -->
  </div>
</body>

JS：

$(function(){
    $('body').scroll(function(){
        console.log( $('#offset').position().top );
    });
});

更新：我在OSX中对此进行了测试，看起来这确实会抑制跳出效果并提供正确的滚动偏移数。

检测用户在元素中滚动的程度

1 个答案: