![](/img/trans.png)
[英]Google chrome document.body.scrollTop always returns 0
[英]document.body.scrollTop Firefox returns 0 : ONLY JS
纯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);
};
尝试使用: document.documentElement.scrollTop
。 如果我是正确的document.body.scrollTop
已弃用。
更新
似乎Chrome不能与答案一起使用,按照@Nikolai Mavrenkov在评论中的建议安全使用:
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
现在应该涵盖所有浏览器。
而不是使用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
something || nothing = something
:)
标准是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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.