document.body.scrollTop Firefox返回0:仅JS


70

纯javascript有其他选择吗?

以下作品适用于歌剧,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);
};

如果可能的话,在纯CSS中更好!
2015年

Answers:


151

尝试使用此:document.documentElement.scrollTop。如果我是正确的document.body.scrollTop,则不建议使用。

更新资料

似乎Chrome不能与答案一起使用,为了安全使用,请@Nikolai Mavrenkov在评论中建议:

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

现在,所有浏览器都应该包含在内。


太厉害了 此解决方案适用于Firefox,因此在firefox上加载时会抛出if条件。谢谢
Al Ex Tsm

我已经确认这也可以解决我的问题。
马丁·钱伯林

14
它不适用于Chrome。使用起来更安全window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
Nikolai Mavrenkov

@NikolaiMavrenkov谢谢,我更新了答案。我以为Chrome也应该包含在内,但似乎它们仍然不符合其他标准;)
Michelangelo

@Michelangelo无法在我的网站上工作,不知道为什么。
Apoorva Shah's

41

除了使用IF条件外,还有一种更简单的方法可以通过使用类似此逻辑表达式的方法来获得正确的结果。

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

默认情况下,两个部分都返回零,因此,当滚动条位于零位置时,这将按预期返回零。

bodyScrollTop = 0 || 0 = 0

在页面滚动时,这些部分之一将返回零,而另一部分将返回大于零的数字。零值的计算结果为false,然后逻辑 ||将采用另一个值作为结果(例如,您期望的scrollTop300)。

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

bodyScrollTop = 300 || 0 = 300

和其他浏览器

bodyScrollTop = 0 || 300 = 300

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

实际上,这都是关于something || nothing = something:)


1
这正是我一直在寻找的东西。
DevWL

1
谢谢你的解释!真正帮助人的,包括我自己
John_911

@ John_911那是StackOverflow的主要目的;)
Wh1T3h4Ck5 '16

20

标准是document.documentElementFF和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


1
我已经插入提到的polyfill并替换document.body.scroll*document.scrollingElement.scroll*我的代码,它在OS X的Chrome 52和Firefox 43中都能正常工作。谢谢Anthony
Geradlus_RU
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.