Question

我为body标签上的scroll事件创建了一个事件处理程序，它正确触发。但是当我尝试使用scrollTop（）找到scollbar的位置时，我无法这样做。为了确定滚动哪个元素，我记录了所有DOM元素的scrollTop（），但令人惊讶的是所有元素都是0.

$('body').scroll(function () {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        console.log('scrolltop', all[i].scrollTop);
    }
});

我想知道的是滚动条的位置以及滚动条是否已到达终点。我试过$（document）.scroll（）和$（window）.scroll，但是没有一个触发。该事件仅适用于body标签。

Answer 1

使用window对象通常是跟踪滚动最可靠的。

ScrollTop也只能真正跟踪窗口滚动的程度，虽然这样做通常很困惑，但不跟踪元素离页面顶部的距离。为此，您需要使用offset。

因此我只是将代码更改为在window滚动条上运行，并且还更改了逻辑以使用jQuerys each函数，这将使事情更简单。：

JS：

$(window).scroll(function () {
    $('*').each(function (){
        console.log(
        'Element Text:', $(this).text(),
          ' | From Top', $(this).offset().top
      );
    })
});

使用上面的JS，您将在控制台中看到以下输出：

Element Text: hello87 | From Top 1556

的jsfiddle： https://jsfiddle.net/wigster/t1e3dee8/1/

scrollTop为javascript中的所有文档元素返回0，但滚动事件在body标签上触发

1 个答案: