document.documentElement.scrollTop || document.body.scrollTop || window.pageXOffset

最新推荐文章于 2025-07-07 10:19:46 发布
最新推荐文章于 2025-07-07 10:19:46 发布
阅读量2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Javascript 文章标签： 滚动条滚动的距离 pageYOffse scrollTop
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Little_Pig_Bug/article/details/81939168
本文详细解释了在网页开发中如何正确获取页面滚动条的位置。针对不同的浏览器环境，介绍了使用document.documentElement.scrollTop、document.body.scrollTop以及window.pageYOffset的方法，并讨论了它们之间的区别及兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.documentElement.scrollTop/document.body.scrollTop

document.documentElement对应的是获取html，所以他获取的位置是正确的，document.body.scrollTop是对应的body,在标准w3c下，document.body.scrollTop恒为0,所以此时应该用document.documentElement.scrollTop。

window.pageYOffset
获取垂直方向上，滚动条距离顶部的偏移量,查阅资料,此时兼容性最好，我的谷歌浏览器的版本是版本 68.0.3440.106（正式版本） （64 位），document.body.scrollTop的值一直是0，其他都能获取到正确的值

用JavaScript写随鼠标滚动的导航条
yangaoyuan1999的博客
12-05 711
实现效果： 1.滚动鼠标滑轮，到达上方导航条时，上方导航条固定在最上面，如果不超过不固定 2.快到最左端导航条时，左端导航条固定在左边 3.在这些之外范围，左端导航条和上方导航条恢复原样。 实现过程： 1.获得最上方header的高度，（header之下是导航条nav） 2.当鼠标滚动超过这个高度时,让导航条的位置固定在最上方 3.继续滑动鼠标，当窗口上方到达做导航条上方一定距离时（这里是12...
关于window.pageYOffset和document.documentElement.scrollTop
12-10
举个例子： Css:假定进行如下简单设置； html{height:1000px;} JS： 代码如下: function(){ window.scrollBy(0,100); alert(window.pageYOffset); } Results: //点击一次后弹出：100;得出的是一个数值，read-only属性；value：Integer(整数)，default:0; 附注：当滚动条到达页面最底部时，window.pageYOffset=1000-document.documentElement.clientHeight;
document.body.scrollTop与document.documentElement.scrollTop兼容
tudusi
11-25 376
document.body.scrollTop与document.documentElement.scrollTop兼容 这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！ 看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标...
一文搞懂 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY`
最新发布
JakeMa1024的博客
07-07 629
在前端开发中，页面滚动是一个非常常见的交互场景。无论是实现“回到顶部”按钮、固定导航栏，还是动态加载内容，开发者都需要精确控制或获取页面的滚动位置。而 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY` 四个属性，正是实现这些功能的关键工具。 本文将深入浅出地讲解这四个属性的用法、区别以及实际应用场景，帮助你快速掌握它们的精髓。
js兼容写法为document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
zgjxyszh的博客
03-13 4893
<!DOCTYPE html> <html> <head> <title>js兼容写法为var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;</title> <meta charse...
document.documentElement.scrollTop
weixin_44283589的博客
08-05 8128
在标准的w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;js中每个载入浏览器的HTML文档都会成为Document对象，documentElement 对应的是 html 标签，如果发现两个高度不一样，是css设置的问题，你的html高度不一定高于body。用body查看，其中clientHeight即为body的css高度，而不是：document.body.scrollTop;...
document.body.scrollTop or document.documentElement.scrollTop
weixin_34032779的博客
11-13 106
　　用Javascript获取DOM节点相对于页面的绝对坐标时，需要计算当前页面的滚动距离，而这个值的获取又取决于浏览器。 　　在Firefox或Chrome浏览器的控制台可以查看document.body 对应于页面中 <body></body>部分的元素，而document.documentElement则相当于整个HTML，说明浏览器在解释渲染后的页面位置范围是存在...
用document.documentElement取代document.body的原因分析
09-05
通过条件语句判断浏览器支持的滚动位置获取方式，既考虑了现代浏览器的 `window.pageYOffset` 和 `window.pageXOffset`，也考虑了老式浏览器的 `document.documentElement.scrollTop` 和 `document.body.scrollTop`...
通过封装scroll.js 获取滚动条的值
10-18
如果上述方法仍然不适用，我们还可以使用document.body.scrollLeft和document.body.scrollTop，这通常适用于兼容模式下的浏览器。 为了解决跨浏览器的兼容性问题，文章中提供的代码通过封装scroll.js创建了一个对象...
【JavaScript源代码】JavaScript实现跟随广告的示例代码.docx
12-29
y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop }; } ``` 这段代码主要包括以下几个步骤： 1. **获取元素**：使用 `document.querySelector("img")` 获取广告图片...
javascript经典特效---显示页面窗口参数.rar
03-08
在一些老版本的浏览器中，可能需要使用`document.documentElement.scrollLeft` 和 `document.documentElement.scrollTop`。 3. **浏览器信息**：`navigator.userAgent` 返回一个字符串，包含了用户浏览器的详细信息...
解决VUE中document.body.scrollTop为0的问题
10-18
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
document.documentElement.scrollTop || document.body.scrollTop;
awn80645的博客
03-19 175
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常。那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document...
document.documentElement.scrollTop || document.body.scrollTop
dbrb71278的博客
07-11 152
如果有doctype的声明,需要用document.documentElement.scrollTop没有doctype的声明,用document.body.scrollTop 转载于:https://www.cnblogs.com/Tachi/p/5660793.html
【document.body.scrollTop】scrollTop=document.body.scrollTop||document.documentElement.scrollTop及浏览器兼容
virus1992的专栏
04-17 1235
本文为此文的衍生：http://blog.csdn.net/virus1992/article/details/8814126 scrollTop=document.body.scrollTop||document.documentElement.scrollTop 等同于： var top = document.documentElement.scrollTop ? d
document.body.scrollTop与document.documentElement.scrollTop区别
NotBad_的博客
08-26 1703
document.body.scrollTop与document.documentElement.scrollTop都是获取滚动条滚动 的距离， 由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop 都有可能取不到值，但是这两个方法有一个特点：  两个方法同时使用只有一个值有效，比如document.body
document.documentElement.scrollTop与document.body.scrollTop
Fair_feng的博客
04-28 1755
问题针对document.documentElement.scrollTop和document.body.scrollTop. 1、在IE Firefox Opera 现代浏览器的标准模式下，使用document.documentElement.scrollTop获取高度，混杂模式下，也就是没有DTD文档声明，则使用document.body.scrollTop. 2、Chrome Safari
ableRef.value.getBoundingClientRect is not a function
04-28
### Vue3 中 `ableRef.value.getBoundingClientRect is not a function` 错误解决方案 在 Vue3 中，如果遇到 `ableRef.value.getBoundingClientRect is not a function` 的错误提示，通常是因为所引用的目标对象未正确初始化或者其值为空。以下是具体原因分析以及解决办法： #### 原因分析 1. **DOM 元素尚未挂载** 当尝试访问 `getBoundingClientRect()` 方法时，组件可能还未完全渲染完毕，此时 `ableRef.value` 返回的是 `null` 或者未指向实际的 DOM 对象[^1]。 2. **引用的对象并非标准 DOM 元素** 如果 `ref` 绑定到了非原生 HTML 元素（例如某些第三方库封装的组件），那么它不会具备 `getBoundingClientRect()` 这一方法[^2]。 3. **跨框架冲突或不兼容情况** 特殊场景下，比如使用 Element Plus 等 UI 框架时，内部逻辑可能导致无法直接获取底层 DOM 结构[^3]。 --- #### 解决方案 ##### 方案一：确保 DOM 已加载完成后再执行操作 利用生命周期钩子函数，在确认虚拟 DOM 渲染完成后才去读取真实 DOM 节点的相关属性。 ```javascript import { onMounted, ref } from 'vue'; export default { setup() { const ableRef = ref(null); onMounted(() => { if (ableRef.value && typeof ableRef.value.getBoundingClientRect === 'function') { const rectInfo = ableRef.value.getBoundingClientRect(); console.log(rectInfo); } else { console.error('The reference does not point to a valid DOM element.'); } }); return { ableRef }; }, }; ``` 此处通过 `onMounted` 钩子保证只有当组件被插入到父级容器之后才会尝试调用 `getBoundingClientRect()` 函数[^4]。 --- ##### 方案二：判断并处理特殊类型的组件实例 如果是基于某个特定库构建出来的复杂控件而非简单标签，则需要先检查它的结构特性再决定下一步动作。 以 Element Plus 的 `<el-cascader>` 控制为例，假设我们想测量其中某一部分的实际尺寸： ```html <template> <el-cascader v-model="selectedValue" ref="cascaderPanel"></el-cascader> </template> <script> import { ref, nextTick } from 'vue'; import { ElCascaderPanel } from 'element-plus'; export default { components: { ElCascaderPanel }, setup() { const cascaderPanel = ref(null); const measureSize = async () => { await nextTick(); // Wait until the component has been rendered. let targetDom; if ('$el' in cascaderPanel.value) { targetDom = cascaderPanel.value.$el; // Access internal root node of custom component. } if (targetDom?.getBoundingClientRect instanceof Function) { const sizeData = targetDom.getBoundingClientRect(); console.info(sizeData); } else { throw new Error(`Unable to locate proper DOM structure within ${cascaderPanel}.`); } }; return { selectedValue: '', cascaderPanel, measureSize }; }, }; </script> ``` 这里展示了如何针对像 Element Plus 提供的选择框这类高级别抽象构件提取它们隐藏起来的真实 DOM 层次关系，并安全地应用几何查询命令[^5]。 --- ##### 方案三：提供回退机制应对低版本浏览器限制 考虑到极少数老旧平台可能缺乏对最新 Web API 的全面支持，可以引入 polyfill 来弥补差距。 下面给出一个简单的例子展示怎样创建自己的备用实现方式来模拟缺少的功能效果: ```javascript if (!Element.prototype.getBoundingClientRect) { Object.defineProperty(Element.prototype, 'getBoundingClientRect', { value: function getCustomRect() { const docElm = document.documentElement, body = document.body || {}, clientLeft = this.clientLeft || 0, clientTop = this.clientTop || 0, scrollX = window.pageXOffset || docElm.scrollLeft || body.scrollLeft || 0, scrollY = window.pageYOffset || docElm.scrollTop || body.scrollTop || 0; return { width: Math.max(this.offsetWidth - clientLeft * 2 , 0), height:Math.max( this.offsetHeight-clientTop*2 ,0 ), left:this.offsetLeft+scrollX-clientLeft , top :this.offsetTop +scrollY -clientTop }; } }); } ``` 这段脚本定义了一个新的全局扩展方法作为原始接口不可用时候的一种替代品[^6]。 --- ### 总结 综上所述，要成功规避掉类似于 `'is not a function'` 类型异常的发生，关键是做到以下几点： - 正确设置好时间序列顺序使得所有必要的前置条件都已满足； - 明晰区分不同种类目标实体之间的差异以便采取恰当策略加以处置； - 在必要场合准备好应急预案用来适配那些极端状况下的需求变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值