Javascript 设置scrollTop交叉浏览器
我在设置scrollTop交叉浏览器时遇到问题。我做了一个搜索,上面说使用下面的解决方案 我目前有:Javascript 设置scrollTop交叉浏览器,javascript,Javascript,我在设置scrollTop交叉浏览器时遇到问题。我做了一个搜索,上面说使用下面的解决方案 我目前有: var body = document.documentElement || document.body; body.scrollTop = 200; 这适用于IE,而不是chrome 如果我换个方向: var body = document.body || document.documentElement; body.scrollTop = 200; 它在chrome中工作,而不是IE 如
var body = document.documentElement || document.body;
body.scrollTop = 200;
这适用于IE,而不是chrome
如果我换个方向:
var body = document.body || document.documentElement;
body.scrollTop = 200;
它在chrome中工作,而不是IE
如何修复此问题?使用
var body = document.documentElement;
body.scrollTop = 200;
它应该是跨浏览器的,除非你做错了什么,比如缺少html标签或者类似的东西
在这方面存在一些互操作性问题和不兼容性。为了避免用户代理嗅探(并方便迁移到标准API,其中
document.documentElement.scrollTop
控制视口,而不是document.body.scrollTop
),现代浏览器中实现了一个新的API。
基本上,我们有一个滚动功能来实现这一点-
function scrollViewport(top, left)
{
var eViewport = document.scrollingElement
if (eViewport)
{
if (typeof top !== "undefined")
{
eViewport.scrollTop = top;
}
if (typeof left !== "undefined")
{
eViewport.scrollLeft = left;
}
}
else
{
// Do your current checks or set the scrollLeft and scrollTop
// properties of both of documentElement and body, or user agent
// sniffing, if you must.
// Example -
// var scrollTop = 200;
// Chrome, Internet Explorer and Firefox, I think.
// document.documentElement.scrollTop = scrollTop;
// Safari, at least up to version 11, I think.
// document.body.scrollTop = scrollTop;
// Or just (I am not sure I recommend this)...
// window.scrollTo(0, scrollTop);
}
}
有关更多信息,请阅读。关于jquery的内容:
$(“html,body”).animate({scrollTop:0},'500')代码>对不起,我没有使用jquerydocument.documentElement.scrollTop是跨浏览器的吗?在chrome中对我不起作用。e、 g:document.documentElement.scrollTop=200;console.log(document.documentElement.scrollTop),在Internet Explorer 6和更高版本中返回0,document.body和document.documentElement存在,因此您放置的第一个是代码将使用的。但是,浏览器对待将视口分配给元素的方式不同,这就是为什么代码在一个浏览器上工作而在另一个浏览器上不工作的原因;console.log(document.documentElement.scrollTop);始终返回0,但在IEF中工作,并且您不处于怪癖模式?您已经设置了doctype?@JimmyRare Chrome(可能还有Safari)最近修复了它们的实现,但是如果您在旧版本(或旧的移动浏览器)中使用此代码,WebKit仍然始终使用document.body
作为真正的scrollTop
:(是的,对此很抱歉。我只是想当然地认为IE是问题所在。:D通常,当我想确保跨浏览器的兼容性时,我会使用库/框架来避免这种痛苦。谢谢,我检测到userAgent字符串,以查看浏览器是否为chrome来设置“body”变量,而不是在很多地方都使用这两种语句,但是您的回答帮助了meNo,不,不,从不检测浏览器!特别是因为他们最近修复了它们的实现,您的代码可能很快就会崩溃!改为使用功能检测。我不确定您的具体情况,但一般来说,这应该行得通,假设您知道页面实际上可以滚动(高于视口)-document.documentElement.scrollTop=1;var useDocumentElement=(document.documentElement.scrollTop!==1);
并检查该变量,而不是浏览器。请注意,如果浏览器检测到此不兼容,则代码现在已中断。Chrome已修复此互操作性问题。