Question

我尝试过使用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);
    }
});

以及在几个div内使用JQuery版本，包括body标签，再次给我0或null。

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

Answer 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;
}

<div id="scrollTests"></div>

Answer 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>

Answer 3

为边缘浏览器添加了条件。由于您不想使用 height
您需要添加$（'body'）。css（'height'，'auto'）; ，然后检查 document.body.scrollTop 给您正确的滚动位置值。希望对您有所帮助。编码愉快。

Answer 4

试

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

Answer 5

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

body {
height: auto !important;
}

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

scrollTop始终返回0

5 个答案: