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

scrollTop returns 0 for all document elements in javascript but scroll event fires on body tag

本文关键字：事件 滚动 body javascript 返回 元素 文档 scrollTop      更新时间：2023-09-26

我为body标记上的滚动事件制作了一个事件处理程序，该事件正确触发。然而，当我试图使用scrollTop（）找到滚动条的位置时，我无法做到这一点。为了弄清楚哪个元素正在滚动，我记录了所有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）.soll（）和$（window）.sroll，但都没有启动。该事件仅适用于body标记。

使用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

Js报价：https://jsfiddle.net/wigster/t1e3dee8/1/

相关文章：