`

document.body.scrollTop 值总为0的解决方法

阅读更多
原文出处:http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp
做页面的时候可能会用到位置固定的层,读取 document.body.scrollTop 来设置层的位置,像这样:
window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.body.scrollTop + "px";
}

可是怎么没有达到预期效果呢,输出 document.body.scrollTop 的值一看,一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准,DTD 当然是不能少的。具有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。
window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.documentElement.scrollTop + "px";
}

页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement。
页面不具有 DTD(或者说没有指定了 DOCTYPE)时,使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容,可以使用如下代码:
var scrollTop = window.pageYOffset 
                || document.documentElement.scrollTop 
                || document.body.scrollTop 
                || 0;
分享到:
评论

相关推荐

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

    综上所述,理解和解决`document.body.scrollTop`和`document.documentElement.scrollTop`的差异,以及在某些情况下值为0的问题,对于确保跨浏览器的网页应用具有良好的用户体验至关重要。开发人员应始终关注最新的...

    document.body.scrollTop用法

    通过了解并掌握 `document.body.scrollTop` 的使用方法,我们可以实现更加丰富的用户体验。 #### 二、关键属性与方法 ##### 1. document.body.scrollTop - **定义**:表示页面被垂直滚动的距离,单位通常是像素。 ...

    document.body属性.document.body.scrollTop

    当 `scrollTop` 的值为0时,表示页面顶部对齐;如果用户向下滚动,`scrollTop` 的值会增加,表示离页面顶部的距离。反之,如果通过JavaScript设置 `scrollTop` 的值,页面会相应地滚动到指定的位置。 在给定的博文...

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

    Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定...

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

    在JavaScript中,`document.body.scrollTop` 是一个常用于获取网页滚动条顶部到页面内容顶部的距离的属性。然而,有时候你会发现这个属性的值始终为零,即使页面已经进行了滚动。这通常与文档类型声明(DOCTYPE)...

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

    在本文中,我们将探讨`document.body.scrollTop`在某些情况下值为0的问题以及解决方案。 问题的核心在于`document.body.scrollTop`在具有DTD(Document Type Definition)的页面上可能不会如预期般工作。DTD 是一种...

    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/...

    document.documentElement && document.documentElement.scrollTop

    否则,如果`document.body.scrollTop`可用,就使用这个值。最后,如果两者都不适用,可能是因为非常古老的浏览器或者非标准实现,这时就需要特殊处理,即所谓的“Netscape stuff”。 在处理页面滚动事件,如监听...

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

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

    javascript 获取网页高度宽度.pdf

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

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

    此函数返回`document.body.scrollHeight`和`document.documentElement.scrollHeight`中的较大值作为文档的总高度。 #### 五、不同浏览器下的表现差异 不同浏览器对`clientWidth`、`clientHeight`等属性的支持有所...

    JS,Jquery获取各种屏幕的宽度和高度

    4. **`document.body.scrollTop`** 和 **`document.body.scrollLeft`**: - 这两个属性表示文档相对于视口已滚动的距离,即滚动条的位置。 5. **`window.screenTop`** 和 **`window.screenLeft`**: - 分别表示...

    document.documentElement document.documentElement.scrollTop

    在标准的浏览器下,需要注意的东西,例如双击自动滚动 var diffY; if (document.documentElement && document.... else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/}

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

    上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...

    js常用代码集锦.

    这段代码的意思是,如果`document.documentElement.scrollTop`的值不为0,则使用它,否则使用`document.body.scrollTop`。类似的,可以使用`document.documentElement.scrollLeft`来获取水平滚动的距离。 以下是...

    js获取文本框的值!js获取浏览器高度和宽度值[收集].pdf

    * `document.body.scrollTop`:获取浏览器的被卷去的高度 * `document.body.scrollLeft`:获取浏览器的被卷去的左边距 ### 使用 `window` 对象 * `window.screen.height`:获取浏览器的屏幕高度 * `window.screen....

Global site tag (gtag.js) - Google Analytics