这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop!
看前辈们的文章,纷纷表示如果有文档声明(即网页第一句的docType)的情况下,标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.
由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用javascript进行判断?
其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。
转载来自:http://www.jo2.org/archives/176.htm
分享到:
相关推荐
由于不同浏览器在处理`document.body.scrollTop`和`document.documentElement.scrollTop`上的差异,开发人员需要一种跨浏览器兼容的方法来准确获取滚动位置。一种常见的方法是编写一个函数,该函数检查当前浏览器的...
- 在处理跨浏览器兼容性问题时,建议使用 `document.documentElement.scrollTop` 而不是 `document.body.scrollTop`。 - 使用 `window.scrollTo` 或 `window.scrollBy` 方法时,注意它们在不同浏览器中的兼容性差异...
5. **浏览器兼容性**:虽然大部分现代浏览器都支持 `document.body.scrollTop`,但在一些老版本的IE浏览器中可能需要使用 `document.documentElement.scrollTop` 来兼容。 6. **CSS替代方案**:有时候,为了避免...
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定...
在JavaScript中,`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性,它们与网页文档的DOM(Document Object Model)交互,特别是涉及到页面滚动时的行为。本文将深入讲解...
在标准模式下,浏览器倾向于使用`document.documentElement.scrollTop`来获取页面的滚动位置,而不是`document.body.scrollTop`。 `document.documentElement` 指的是HTML文档的根元素,即`<html>`标签。在标准模式...
在标准模式下,则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0,若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后,前端开发者在...
这段代码首先尝试获取`window.pageYOffset`,如果浏览器不支持,则回退到`document.documentElement.scrollTop`,如果还不行,再尝试`document.body.scrollTop`,最后如果所有尝试都失败,将`scrollTop`设为0。...
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
- 在 Firefox 和 Opera 中,`document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示页面宽度减去`BODY`的外边距(`margin`)后的宽度和高度。 为了确保代码的兼容性,开发者在...
这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中,这两个属性可能有不同的行为,因此需要进行条件判断来确保兼容性。 ```javascript ...
对于IE5.5及更高版本,需要特别处理`document.body.scrollLeft`和`document.documentElement.scrollLeft`,以及`document.body.scrollTop`和`document.documentElement.scrollTop`,以确保在所有浏览器中的兼容性: ...
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...
在某些老版本的IE浏览器中,特别是IE8及以下,`window.pageYOffset` 不被支持,此时你需要使用`document.documentElement.scrollTop` 或 `document.body.scrollTop` 来获取滚动位置。但要注意,`document....
document.body.scrollTop : document.documentElement.scrollTop; } ``` 这段代码首先检查`document.compatMode`,如果为`BackCompat`,那么它使用`document.body`来获取页面尺寸和滚动条信息;如果为`CSS1Compat`...
综上所述,理解`document.body`和`document.documentElement`以及它们与`document.compatMode`的关系,能够帮助开发者更好地处理浏览器兼容性问题,特别是涉及到CSS布局和页面尺寸计算时。同时,熟悉各种尺寸属性和...