`

document.documentElement.scrollTop

阅读更多
要获取当前页面的滚动条纵坐标位置,用:


document.documentElement.scrollTop;

而不是:


document.body.scrollTop;

documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替

如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
    top=document.body.scrollTop;
    left=document.body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}

 

分享到:
评论

相关推荐

    火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时,我们深入分析了浏览器在处理页面滚动位置时的不同行为,尤其是当滚动位置值始终为0时的...

    document.documentElement && document.documentElement.scrollTop

    在JavaScript中,`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性,它们与网页文档的DOM(Document Object Model)交互,特别是涉及到页面滚动时的行为。本文将深入讲解...

    document.body.scrollTop用法

    - 使用 `event.clientX` 和 `event.clientY` 获取鼠标相对于视口的位置,但若想得到相对于整个文档的位置,则需加上 `document.documentElement.scrollTop` 或 `document.documentElement.scrollLeft`。 ```...

    document.documentElement document.documentElement.scrollTop

    if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...

    Document.body.scrollTop的值总为零的快速解决办法

    在标准模式下,浏览器倾向于使用`document.documentElement.scrollTop`来获取页面的滚动位置,而不是`document.body.scrollTop`。 `document.documentElement` 指的是HTML文档的根元素,即`<html>`标签。在标准模式...

    document.body属性.document.body.scrollTop

    5. **浏览器兼容性**:虽然大部分现代浏览器都支持 `document.body.scrollTop`,但在一些老版本的IE浏览器中可能需要使用 `document.documentElement.scrollTop` 来兼容。 6. **CSS替代方案**:有时候,为了避免...

    解决VUE中document.body.scrollTop为0的问题

    页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。 页面没有DTD,即没指定DOCTYPE时,使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享...

    关于window.pageYOffset和document.documentElement.scrollTop

    在Web开发中,特别是在处理页面滚动事件时,`window.pageYOffset` 和 `document.documentElement.scrollTop` 是两个非常重要的属性。它们都是用来获取用户在浏览器窗口中滚动的位置,即浏览器视口距离文档顶部的距离...

    document.body.scrollTop 值总为0的解决方法 比较常见的标准问题

    这段代码首先尝试获取`window.pageYOffset`,如果浏览器不支持,则回退到`document.documentElement.scrollTop`,如果还不行,再尝试`document.body.scrollTop`,最后如果所有尝试都失败,将`scrollTop`设为0。...

    document.documentElement和document.body区别介绍

    在标准模式下,则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0,若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后,前端开发者在...

    javascript scrollTop正解使用方法

    在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/...

    javascript 获取网页高度宽度.pdf

    这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中,这两个属性可能有不同的行为,因此需要进行条件判断来确保兼容性。 ```javascript ...

    js中的如何定位固定层的位置.docx

    但在W3C标准模式下(如XHTML文档),`document.body.scrollTop`通常返回0,此时应使用`document.documentElement.scrollTop`和`document.documentElement.scrollLeft`来获取正确的滚动值。 以下是一段具有良好兼容...

    javascript获取滚动条高度 页面宽度与高度

    if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return ...

    用document.documentElement取代document.body的原因分析

    在上面的代码段中,通过条件语句判断浏览器支持的滚动位置获取方式,既考虑了现代浏览器的 `window.pageYOffset` 和 `window.pageXOffset`,也考虑了老式浏览器的 `document.documentElement.scrollTop` 和 `...

    获取页面长宽和滚动条的位置

    } else if(document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict y = document.documentElement.scrollTop; x = document.documentElement.scrollLeft; } else if...

    vue监听 vue实时监听窗⼝滚动条

    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop); } } ``` 3. **解绑事件** 当组件被销毁之前,为了避免内存泄漏,我们需要...

Global site tag (gtag.js) - Google Analytics