scrollTop 总是返回 0答案

【问题标题】：scrollTop always returns 0scrollTop 总是返回 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

标签： javascript jquery meteor

【解决方案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 标签

body {
height: auto !important;
}

然后检查 document.body.scrollTop 这将为您提供正确的滚动值

【讨论】：

哦，是的！我的身体是height: 100%;，而scrollTop 总是为0。height: auto;，现在scrollTop 返回一个值！我猜你不应该使用!important，而是找到设置高度的文件来更改它。