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

纯JavaScript的任何替代品?

以下作品在歌剧,镀铬和狩猎。 尚未在浏览器上进行testing:

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

尝试使用这个: document.documentElement.scrollTop 。 如果我是正确的document.body.scrollTop已弃用。

更新

似乎Chrome不会与答案一起玩,要按照@Nikolai Mavrenkov在评论中所build议的那样安全使用:

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

现在所有浏览器都应该被覆盖。

而不是使用IF条件,通过使用像这样的逻辑expression式这样的事情,有更简单的方法来获得正确的结果。

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

这两个部分默认返回零,所以当你的滚动是在零位置,这将返回到预期的零。

 bodyScrollTop = 0 || 0 = 0 

在页面滚动其中一个部分将返回零,另一个将返回一些大于零的数字。 归零值的计算结果为假,然后是逻辑 || 将会得到另一个值作为结果(例如,您预期的scrollTop300 )。

类似Firefox的浏览器将会看到这个expression式

 bodyScrollTop = 300 || 0 = 300 

和其他浏览器看到

 bodyScrollTop = 0 || 300 = 300 

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

事实上,这都是关于something || nothing = something something || nothing = something 🙂

标准是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