document.body.scrollTop,document.body.clientHeight的值为0的问题

最新推荐文章于 2024-04-03 08:13:25 发布
最新推荐文章于 2024-04-03 08:13:25 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgh731/article/details/3998949
版权

在写个漂浮广告时遇到document.body.scrollTop和document.body.clientHeight为零的问题，在网上找到了原因：是因为html/jsp文件头部加了文档类型。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

解决办法可以有两个（使用第二个好点）

１.去掉头部文档类型。

２.把document.body.scrollTop和document.body.scrollLeft这两个家伙改个名字：

document.documentElement.scrollTop 和document.documentElement.scrollLeft。

 

当然document.body.clientWidth和document.body.clientHeight也要改名字了，改为：document.documentElement.clientWidth和document.documentElement.clientHeight

lgh731
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
bootstrap拖拽组件集成echarts图表，图表div的clientWidth、clientHeight始终为0，导致无法生成图表问题
zhangyongbink的博客
03-09 589
1.问题点：生成图表的div被包含到一个样式含有display:none的上级..节点，这个样式是拖拽组件所设定的，无法更改。导致图表生成不了。 2：试过解决的方法：手动设置div的宽高、寻找上上级等节点的宽高，，都无法解决，因为即使有宽高，但echarts会判断div的clientWidth和heightClient，问题无法解决。 3.经过多次尝试，发现拖拽组件是相应拷贝一份到目标...
document.documentElement.clientHeight与document.body.clientHeight的区别
galaxyJING的博客
03-22 546
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。单位px，只读元素。clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度。offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度。
H5常见问题及解决方案手册(2)，CSS浮动实战
最新发布
2301_76232361的博客
04-03 566
, {});
document.documentElement.clientHeight与document.body.clientHeight的区别解析
qq_37734787的博客
03-21 1189
document.documentElement指的是元素 document.bodyt指的是元素 document.documentElement.clientHeight 屏幕可视区域高度
documen.body.clientHeight的取值问题。
weixin_34220179的博客
12-24 322
有的时候要去页面的顶部到底部的高度时就要用到document.body.clientHeight来获得。 在HTML中无论body的高度是多少只要用documen.body.clientHeight就能获得到底有多高，例如：1074*768分辨率取得的值就是768.即使body中只有一句“hello world” 也能获得到底的高度。 但是在XHTML中如果body只有一行的话，那么使用d...
doctype后如何获得body.clientHeight的方法
12-02
在ie6中很多js脚本执行就会出现问题，一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后，在ie6中...
document.compatMode的CSS1compat使用介绍
09-04
这段代码首先检查 `document.compatMode` 的值，如果为 `'CSS1Compat'`，则表示页面在标准模式下运行，否则是在Quirks Mode。然后，根据模式选择合适的元素（`document.documentElement` 或 `document.body`）来获取...
JS滑动到页面顶部（或底部）
热门推荐
xiaopeng_han123的博客
05-24 4万+
window.scrollTo(0, document.documentElement.clientHeight);
页面滚动事件scroll
qq_41241767的博客
08-01 1116
页面滚动事件 //在mounted钩子函数里面注册scroll事件 mounted() { this.$router.afterEach((to, from, next) => { window.scrollTo(0, 0); }); window.addEventListener("scroll", this.about); }, method...
一个document.documentElement.clientWidth为0的问题
weixin_34198797的博客
03-20 403
2019独角兽企业重金招聘Python工程师标准>>> ...
document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
weixin_33932129的博客
09-04 541
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题。这两个应该不是一个东西。   页面中加了：&lt;!DOCTYPE html&gt; 很明显在谷歌浏览器中两个值不是一个概念。   页面中不加：&lt;!DOCTYPE html&gt; 发现两个的值掉了个个！ ...
[JS]document.body.clientHeight的取值
weixin_30550271的博客
01-05 192
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果body 体中只有一行, 则documen...
scrollTo函数处理页面滚动问题
Tom_2018的博客
08-04 2967
scrollTo函数 --scrollHeight获取对象的滚动高度。 --scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 --scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --scrollWidth获取对象的滚动宽度。 scrollTo函数不存在兼容性问题，直接用这个函数就可以了 #滚动到底部 js = "window.scrollTo(0,document.body.scrollHeight)" driver...
日常开发中js工具方法
weixin_44912745的博客
05-06 247
日常开发中js工具方法 1. 回到顶部 const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; scrollToTop(); 2.判断数据类
分析代码： // 滑动滚动条 - 实现自动加载 scrollTo() { // 滚动视口高度(也就是当前元素的真实高度) let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 可见区域高度 let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 滚动条顶部到浏览器顶部高度 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // console.log (clientHeight); // console.log (scrollTop); // console.log (scrollHeight); if (clientHeight + scrollTop + 1 >= scrollHeight) { // 如果数据量超过30就停止继续加载 console.log('滚动条触底了'); console.log(this.$store.getters.getStoreCount); console.log(this.$store.getters.getStoreCount >= 30); if (this.$store.getters.getStoreCount >= 30) { window.removeEventListener('scroll', scrollTo); console.log('-------------------'); console.log('执行了移除加载事件'); } else { // 一秒后执行 const loading = this.$loading({ lock: true, text: 'Loading', }); setTimeout(() => { this.load(); loading.close(); }, 1000); } } },
06-13
这是一个 Vue.js 组件中的 `scrollTo` 方法，用于实现滚动条自动加载更多数据的功能。具体来说： 1. 首先，该方法获取了滚动视口高度、可见区域高度和滚动条顶部到浏览器顶部的高度，以便判断是否已经滚动到页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值