scrollTop始终返回0

Question

scrollTop始终返回0

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Ori*_*iol 19

根据实现,滚动文档的元素可以是<html>或<body>.

CSSOM View介绍document.scrollingElement(参见邮件线程),它返回相应的元素:

document.scrollingElement.scrollTop;

Run Code Online (Sandbox Code Playgroud)

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

对于不支持上述任何内容的浏览器,您可以检查以下两种情况:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

#scrollTests {
  position: fixed;
  top: 0;
}
body:after {
  content: '';
  display: block;
  height: 999999px;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	13202 次
最近记录：	7 年，10 月前