document.body.scrollTop Firefox返回0:只有JS

Question

纯javascript中的任何替代品？

以下适用于歌剧,铬和野生动物园.尚未在资源管理器上测试过:

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;

这两个部分默认返回零,因此当您的滚动位于零位置时,这将按预期返回零.

bodyScrollTop = 0 || 0 = 0

在页面滚动中,其中一个部分将返回零,另一个将返回一个大于零的数字.归零值的计算结果为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并且无法使用该标准,因为如果它们改为标准,则会出现关于向后兼容性的抱怨,这篇文章很好地解释了它

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