[英]document.body.scrollTop Firefox returns 0 : ONLY JS
Any alternatives in pure javascript? 纯javascript中的任何替代品?
The following works in opera, chrome and safari. 以下适用于歌剧,铬和野生动物园。 Have not tested yet on explorer:
尚未在资源管理器上测试过:
http://monkey-me.herokuapp.com http://monkey-me.herokuapp.com
https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js
At page load should scroll down to div '.content': 在页面加载时应向下滚动到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);
};
Try using this: document.documentElement.scrollTop
. 尝试使用:
document.documentElement.scrollTop
。 If I am correct document.body.scrollTop
is deprecated. 如果我是正确的
document.body.scrollTop
已弃用。
Update 更新
Seems like Chrome does not play along with the answer, to be safe use as suggested by @Nikolai Mavrenkov in the comments: 似乎Chrome不能与答案一起使用,按照@Nikolai Mavrenkov在评论中的建议安全使用:
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
Now all browsers should be covered. 现在应该涵盖所有浏览器。
Instead of using IF conditions, there's easier way to get proper result by using something like this logical expression. 而不是使用IF条件,通过使用类似逻辑表达式的东西,更容易获得正确的结果。
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
Both parts return zero by default so when your scroll is at zero position this will return zero as expected. 这两个部分默认返回零,因此当您的滚动位于零位置时,这将按预期返回零。
bodyScrollTop = 0 || 0 = 0
On page-scroll one of those parts will return zero and another will return some number greater than zero. 在页面滚动中,其中一个部分将返回零,另一个将返回一个大于零的数字。 Zeroed value evaluates to false and then logical OR
||
归零值的计算结果为false,然后是逻辑OR
||
will take another value as result (ex. your expected scrollTop is 300 ). 将得到另一个值(例如,您的预期scrollTop为300 )。
Firefox-like browsers will see this expression as 类似Firefox的浏览器会将此表达式视为
bodyScrollTop = 300 || 0 = 300
and rest of browsers see 和其他浏览器看到
bodyScrollTop = 0 || 300 = 300
which again gives same and correct result. 这再次给出了相同和正确的结果。
In fact, it's all about something || nothing = something
事实上,这完全是关于
something || nothing = something
something || nothing = something
:) something || nothing = something
:)
The standard is document.documentElement
and this is used by FF and IE. 标准是
document.documentElement
,FF和IE使用它。
WebKit uses document.body
and couldn't use the standard because of complaints about backward compatibility if they changed to the standard, this post explains it nicely WebKit使用
document.body
并且由于关于向后兼容性的投诉如果他们改为标准而无法使用该标准,这篇文章很好地解释了它
https://miketaylr.com/posts/2014/11/document-body-scrolltop.html https://miketaylr.com/posts/2014/11/document-body-scrolltop.html
There is a new property on document which WebKit now supports WebKit现在支持的文档上有一个新属性
https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement
so this will get you to the right element 所以这将使你找到正确的元素
var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;
and there is a polyfill too 并且还有一个polyfill
https://github.com/mathiasbynens/document.scrollingElement https://github.com/mathiasbynens/document.scrollingElement
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.