js关于无法获取clientHeigth / scrollTop 等值解决办法。 介于DocumentElement与body差别...

最新推荐文章于 2023-06-06 15:38:56 发布
最新推荐文章于 2023-06-06 15:38:56 发布 · 163 阅读 · 0

本文探讨了在使用 DocumentElement 获取 scrollTop 值时遇到的问题及解决方法，包括兼容性问题和替代方案。

documentElement 属性可返回文档的根节点。

document.documentElement是文档对象根节点(html)的引用。

今天遇到一问题，用DocumentElement获取scrollTop值， 值始终为零，搞了很久才解决，

至于原因暂时还不知，可能系统与浏览器的兼容性问题把。

如果document.documentElement.scrollTop无法获取到值，可以改成：document.body.scrollTop

iteye_3224
关注
【小河今学 | JavaScript】关于ScrollTop失效问题
LB_laber的博客
08-04 2092
ScrollTop失效问题
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
js 获取滚动条位置 scrollTop总是0
weixin_43964271的博客
06-06 2710
由于页面导航栏是在页面中而非顶部固定的，所以需要在页面滚动到遮挡住导航栏的时候，在固定位置显示导航栏，我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等，都是类似的需求。改为①e.target.scrollTop获取div滚动位置；②addEventListener第三个参数设置成true，事件捕获，就可以实时获取div的滚动位置了。结果一直输出的是0，而且并不是一直监听，只输出几次；定义有滚动条的dev区域是box。
关于JS获取clientWidth大小一直为0的问题
liuhui12345的博客
08-20 4410
__.clientWidth = 0; 因为父集用了display:none; 所以取不到值，将父集设置为display: block;就行了
解决js代码中 document.body.clientWidth 为0
Ctrl_kun的博客
11-06 974
在不同浏览器中获取方式不同(HTML5) chrome: document.documentElement.clientHeight IE: document.body.clientWidth html5中如果用错则为0 解决方法 将HTML5换成HTML4 用js分别获取两个值，取最大值 max(document.documentElement.clientHeight,document.body.clientWidth) ...
javascript document.documentElement和document.body的区别
IT部落阁
05-27 450
documentElement 和 body 相关说明：     DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。     documentElement 是整个节点树的根节点root，即 标签     body是DOM对象里的body子节点，即  标签 document.
Document.body.scrollTop的值总为零的快速解决办法
09-02
在JavaScript中，`document.body.scrollTop` 是一个常用于获取网页滚动条顶部到页面内容顶部的距离的属性。然而，有时候你会发现这个属性的值始终为零，即使页面已经进行了滚动。这通常与文档类型声明（DOCTYPE）...
document.documentElement && document.documentElement.scrollTop
10-30
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
document.documentElement和document.body区别介绍
09-05
在标准模式下，则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0，若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后，前端开发者在...
获取元素的几何尺寸、offsetWidth、offsetHeight、clientWidth、clientHeigh、offsetX offsetY、pageX pageY
qq_59517599的博客
07-21 636
1、获取当前页面卷去（滚轮后覆盖）的距离 window.pageYOffset || document.body.scro ll Top||document.documentElement.scro ll Top 2、 获取页面选中元素的DOM属性 <script> var el=document.querySelector(".box") var re=el.getBoundingClientRect(); console.log(re) 3、offs...
js HTMLCollection数组中的数据无法获取 dorado onRenderCell
puspos的博客
11-16 2292
所有的元素全部加载之后，才可以获取到HTMLCollection数组中的元素 解决办法 使用setTimeout函数 //设置300ms后执行 setTimeout(function(){ xx; },300);
chrome scrollTop 获取失败问题及解决方案
Hellogen
10-29 2791
今天在做某网站的日常维护时发现 chrome 的scrollTop突然获取失败，但 ie 系列和 edge 正常，最起码在9月中旬还能正常获取，表现如下  版本 dxdiag : win10 64 10.0 15063 chrome ：  62.0.3202.75（正式版本） （64 位）   解决方法，如果在最外层监听 scrollTop 的参数，可以使用 window.scrol...
原生JS获取ScrollTop/ScrollLeft
LGD_Sunday的专栏
09-05 1万+
使用原生JS获取浏览器ScrollTop，ScrollLeft的方法：function scroll() { if (window.pageYOffset != null){ // 支持IE9 + return{ left:window.pageXOffset, top:wi
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 4218
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
头部导航栏获取scrollTop失败
Tfishupupup的博客
01-17 674
自己的导航栏需要获取scrollTop来改变样式，用js写的通用文件。其他页面都可以正常获取，唯独一个页面不行。在论坛找了很久，有说获取scrollTop方式不对的要用 var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 这是通用方法。 但是我的问题不是这个，是由于该页面的样式表的body设置了height：100% ,这个设置就会导致获取不到，把他删除
浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）
热门推荐
骆小胖~
09-13 2万+
  一、宽高     （1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度     （2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度     （3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding&lt;如果没有限制div的height，即height是自适应的，那
前端学习记录——offset与client
GuardianMANGO的博客
02-19 887
offset与client
clientHeight,offsetHeight,scrollHeight迷一样的三个值
Maha
11-10 1384
clientHeight,offsetHeight,scrollHeight解析
如何使用JavaScript获取页面滚动距离 document.body.scrollTop document.documentElement.scrollTop 兼容性
最新发布
07-27
在 JavaScript 中，获取页面的滚动距离是常见的需求，尤其是在需要根据滚动位置进行页面交互或动画效果时。获取滚动距离的方式在不同浏览器中存在兼容性差异，主要体现在 `document.body.scrollTop` 和 `document.documentElement.scrollTop` 的使用上。 ### 获取页面滚动距离的兼容性差异 在早期浏览器中，尤其是 Internet Explorer（IE）的不同版本中，`document.body.scrollTop` 和 `document.documentElement.scrollTop` 的行为有所不同。这种差异主要源于文档模式（即是否声明了 `<!DOCTYPE html>`）对滚动属性的影响： - **当文档声明了 `<!DOCTYPE html>`**，在 IE9 及以上版本中，可以通过 `document.documentElement.scrollTop` 获取页面滚动距离。 - **当文档未声明 `<!DOCTYPE html>`**，在 IE9 及以下版本中，可以通过 `document.body.scrollTop` 获取页面滚动距离。 - **在现代浏览器（如 Chrome、Firefox、Edge）中**，通常支持 `window.pageXOffset` 和 `window.pageYOffset`，这是获取滚动距离的标准化方法，且不依赖于文档模式[^1]。 ### 推荐的兼容性写法 为了确保代码在不同浏览器和文档模式下都能正确获取滚动距离，可以采用以下兼容性写法： ```javascript var x = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop; ``` 此写法优先使用 `window.pageXOffset`，如果不可用，则尝试 `document.documentElement.scrollTop`，最后回退到 `document.body.scrollTop`。这种写法覆盖了大多数浏览器和文档模式下的兼容性问题。 ### 函数封装以提高性能 为了进一步优化性能，可以将滚动距离的获取逻辑封装为一个函数，首次调用时根据浏览器支持情况动态重写函数，从而避免重复判断： ```javascript function getScrollOffset() { if (window.pageXOffset) { getScrollOffset = function() { return { top: window.pageXOffset, left: window.pageYOffset }; }; } else { getScrollOffset = function() { return { top: document.documentElement.scrollTop + document.body.scrollTop, left: document.documentElement.scrollLeft + document.body.scrollLeft }; }; } return getScrollOffset(); } ``` 通过这种方式，函数在首次调用时会根据浏览器的支持情况重新定义，后续调用时直接使用最合适的实现，从而提高执行效率。 ### 总结 在实际开发中，推荐优先使用 `window.pageXOffset` 和 `window.pageYOffset` 获取滚动距离。如果需要兼容老旧的浏览器，尤其是 IE9 及以下版本，可以通过 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 进行回退处理。通过合理的兼容性写法和函数封装，可以确保代码在不同环境下稳定运行。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值