原文出处:
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;
分享到:
相关推荐
综上所述,理解和解决`document.body.scrollTop`和`document.documentElement.scrollTop`的差异,以及在某些情况下值为0的问题,对于确保跨浏览器的网页应用具有良好的用户体验至关重要。开发人员应始终关注最新的...
通过了解并掌握 `document.body.scrollTop` 的使用方法,我们可以实现更加丰富的用户体验。 #### 二、关键属性与方法 ##### 1. document.body.scrollTop - **定义**:表示页面被垂直滚动的距离,单位通常是像素。 ...
当 `scrollTop` 的值为0时,表示页面顶部对齐;如果用户向下滚动,`scrollTop` 的值会增加,表示离页面顶部的距离。反之,如果通过JavaScript设置 `scrollTop` 的值,页面会相应地滚动到指定的位置。 在给定的博文...
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定...
在JavaScript中,`document.body.scrollTop` 是一个常用于获取网页滚动条顶部到页面内容顶部的距离的属性。然而,有时候你会发现这个属性的值始终为零,即使页面已经进行了滚动。这通常与文档类型声明(DOCTYPE)...
在本文中,我们将探讨`document.body.scrollTop`在某些情况下值为0的问题以及解决方案。 问题的核心在于`document.body.scrollTop`在具有DTD(Document Type Definition)的页面上可能不会如预期般工作。DTD 是一种...
在标准模式下,则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0,若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后,前端开发者在...
在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/...
否则,如果`document.body.scrollTop`可用,就使用这个值。最后,如果两者都不适用,可能是因为非常古老的浏览器或者非标准实现,这时就需要特殊处理,即所谓的“Netscape stuff”。 在处理页面滚动事件,如监听...
但在W3C标准模式下(如XHTML文档),`document.body.scrollTop`通常返回0,此时应使用`document.documentElement.scrollTop`和`document.documentElement.scrollLeft`来获取正确的滚动值。 以下是一段具有良好兼容...
这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中,这两个属性可能有不同的行为,因此需要进行条件判断来确保兼容性。 ```javascript ...
此函数返回`document.body.scrollHeight`和`document.documentElement.scrollHeight`中的较大值作为文档的总高度。 #### 五、不同浏览器下的表现差异 不同浏览器对`clientWidth`、`clientHeight`等属性的支持有所...
4. **`document.body.scrollTop`** 和 **`document.body.scrollLeft`**: - 这两个属性表示文档相对于视口已滚动的距离,即滚动条的位置。 5. **`window.screenTop`** 和 **`window.screenLeft`**: - 分别表示...
在标准的浏览器下,需要注意的东西,例如双击自动滚动 var diffY; if (document.documentElement && document.... else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/}
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...
这段代码的意思是,如果`document.documentElement.scrollTop`的值不为0,则使用它,否则使用`document.body.scrollTop`。类似的,可以使用`document.documentElement.scrollLeft`来获取水平滚动的距离。 以下是...
* `document.body.scrollTop`:获取浏览器的被卷去的高度 * `document.body.scrollLeft`:获取浏览器的被卷去的左边距 ### 使用 `window` 对象 * `window.screen.height`:获取浏览器的屏幕高度 * `window.screen....