scrollTop 总是返回 0

Posted 2023-03-08

技术标签:

【中文标题】scrollTop 总是返回 0【英文标题】：scrollTop always returns 0 【发布时间】：2016-07-13 15:49:19 【问题描述】：

我试过使用scrollTop和scrollTop()，它总是返回0。怎么会这样，我试过这样：

Template.myHome.events(
    "click .examine": function(event)
        event.preventDefault();

        varPos = event.clientY;
        var yPos = document.body.scrollTop;
        console.log("Y coords: " + yPos);
    
);

以及在包括body标签在内的几个div上使用JQuery版本，同样都给我0或null。

我只想获取用户向下滚动页面时在 y 轴上遍历的像素数。

【问题讨论】：

document.body.scrollTop 应该可以工作。可以发一些代码吗？ @LGSon，我正在 Chrome 中测试在这种情况下使用 event.pageY 有效。这能回答你的问题吗？ document.body.scrollTop Firefox returns 0 : ONLY JS 【参考方案1】：

根据实现的不同，滚动文档的元素可以是<html> 或<body>。

CSSOM View 引入了document.scrollingElement（见mailing thread），它返回相应的元素：

document.scrollingElement.scrollTop;

或者，您可以使用window.scrollY 或window.pageYOffset。它们是别名并返回相同的值，但后者有更多的浏览器支持。

对于不支持上述任何一项的浏览器，您可以同时检查这两项：

document.documentElement.scrollTop;
document.body.scrollTop;

var scrollTests = document.getElementById('scrollTests');
var tests = [
  "document.body.scrollTop",
  "document.documentElement.scrollTop",
  "document.scrollingElement.scrollTop",
  "window.scrollY",
  "window.pageYOffset"
];
for(var i=0; i<tests.length; ++i) 
  var p = scrollTests.appendChild(document.createElement('p'));
  p.appendChild(document.createTextNode(tests[i] + ' = '));
  p.appendChild(document.createElement('span')).id = tests[i];

window.onscroll = function() 
  for(var i=0; i<tests.length; ++i) 
    try var val = eval(tests[i]); 
    catch(err)  val = '[Error]'; 
    document.getElementById(tests[i]).innerHTML = val;
  
;

#scrollTests 
  position: fixed;
  top: 0;

body:after 
  content: '';
  display: block;
  height: 999999px;

&lt;div id="scrollTests"&gt;&lt;/div&gt;

【讨论】：

我在 FF 中测试过，document.documentElement.scrollTop; 可以工作，但不能在 Chrome 中。 @user94628 Chromium 51 需要documentElement 而不是body，但如果我没记错的话是body，所以他们可能已经改变了它。无论如何，您应该同时检查两者（使用最大值、求和或其他）。感谢您的建议，我使用event.pageY解决了这个问题在第一个实例中，它总是给出 0，但是当导航到其他页面并返回同一屏幕时，它给出了正确的值。【参考方案2】：

这涵盖了 html 和 body 元素，跨浏览器（在 Chrome/Canary、FF、Edge、IE11 上测试）

function getScrollTop() 
  alert(Math.max(document.body.scrollTop,document.documentElement.scrollTop));

Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>

<button onclick="getScrollTop();">Click me</button>

【讨论】：

@user94628 我现在正在使用 Chrome，它可以工作。你有哪个版本？ ...当我更新我的答案一次时，您是否刷新了页面 @user94628 有趣...我使用它，它对我有用我认为这可能是在 Meteor 框架中使用它的问题。 @user94628 如果您在 SO 运行我的示例，它可以工作吗？ @user94628 你在 Meteor 中运行的代码看起来如何？【参考方案3】：

试试

 $("html, body").scrollTop();

【讨论】：

【参考方案4】：

function topScrollFunction() 
                if (document.documentMode || /Edge/.test(navigator.userAgent))
                  $('body').css('height', 'auto'); 
                 window.scrollTo(0,0);
              else 
                window.scrollTo(0,0);

height

添加 $('body').css('height', 'auto');

document.body.scrollTop

【讨论】：

【参考方案5】：

您需要将以下 CSS 添加到 body 标签