项目总结之页面滑动到底部按钮点亮之（clientHeight、scrollHeight、offsetHeight）

最新推荐文章于 2024-09-11 11:10:43 发布

时清云

最新推荐文章于 2024-09-11 11:10:43 发布

阅读量382

点赞数

分类专栏：项目总结 javascript

本文链接：https://blog.csdn.net/xiaolinlife/article/details/88671335

版权

javascript 同时被 2 个专栏收录

108 篇文章 2 订阅

订阅专栏

项目总结

84 篇文章 2 订阅

订阅专栏

最近在项目中遇到这样一个需求，页面滑动到底部，按钮点亮，这个时候按钮才可以点击。我估计之前也有许多人遇到过这个问题，那么下面我就把这个功能总结一下吧。
首先我们先来了解一下clientHeight、scrollHeight、offsetHeight的概念和区别
clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）;
scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）;
offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距；
概念有些模糊，还是不清楚怎么使用这三个属性，那请看下面

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高(ff)：document.body.scrollTop;
网页被卷去的高(ie): document.documentElement.scrollTop;

  // 注意 重点
   现在的浏览器都支持scrollingElement
   document.scrollingElement一统江湖
   在桌面端document.scrollingElement就是document.documentElement；
   在移动端document.scrollingElement就是document.body。
   所以现在网页都可以用document.scrollingElement.scrollTop
   
   // 获取一个元素的高度  height，clientHeight，offsetHeight之间的区别
   height：指元素内容的高度  不包括padding和边框
   clientHeight：内容高度+padding高度  
   offsetHeight：内容高度+padding高度+边框宽度 

    网页被卷去的左：document.body.scrollLeft;
    网页正文部分上：window.screenTop;
    网页正文部分左：window.screenLeft;
    某个元素的宽度：obj.offsetWidth;
    某个元素的高度：obj.offsetHeight;
    某个元素的上边界到body最顶部的距离：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）
    某个元素的左边界到body最左边的距离：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）
    返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offsetTop（在元素的包含元素含滚动条的情况下）
    返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）

scrollTop, scrollLeft
设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性