document.body.scrollTop Firefox returns 0：仅 JS

Question

纯javascript有什么替代品吗？

Opera、chrome 和 Safari 中的以下作品。还没有在资源管理器上测试过：

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

在页面加载时应向下滚动到 div '.content':

var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
};

Answer 1

试试这个：document.documentElement.scrollTop。如果我是正确的，document.body.scrollTop 已被弃用。

更新

似乎 Chrome 不符合答案，按照@Nikolai Mavrenkov 在评论中的建议安全使用：

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

现在应该涵盖所有浏览器了。

Answer 2

不是使用 IF 条件，而是使用像这样的逻辑表达式更简单的方法来获得正确的结果。

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

两个部分 return 默认情况下为零，因此当您的滚动条处于零位置时，这将按预期 return 为零。

bodyScrollTop = 0 || 0 = 0

在页面滚动时，其中一个部分将 return 为零，而另一个部分将 return 一些大于零的数字。归零值评估为 false，然后逻辑 OR || 将采用另一个值作为结果（例如，您预期的 scrollTop 是 300).

类似 Firefox 的浏览器会将此表达式视为

bodyScrollTop = 300 || 0 = 300

其他浏览器见

bodyScrollTop = 0 || 300 = 300

再次给出相同且正确的结果。

其实都是为了something || nothing = something :)

Answer 3

标准是document.documentElement，FF和IE都用这个

WebKit 使用 document.body 并且无法使用该标准，因为如果他们更改为标准会向后兼容，这个 post 解释得很好

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

文档中有一个新的属性 WebKit 现在支持

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

所以这会让您找到正确的元素

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;

还有一个 polyfill

https://github.com/mathiasbynens/document.scrollingElement

document.body.scrollTop Firefox returns 0：仅 JS

document.body.scrollTop Firefox returns 0 : ONLY JS

javascript

firefox

cross-browser