您现在的位置是：网站首页> 编程资料编程资料
JS属性scrollTop clientHeight scrollHeight理解学习_JavaScript_
2023-05-24
589人已围观
简介 JS属性scrollTop clientHeight scrollHeight理解学习_JavaScript_
引言
在开发中我们常常会用到判断滚动条是否触底的逻辑。我一般都会在网上搜一段代码，这段代码有用到scrollTop、clientHeight、 scrollHeight 。接着我简单看一下好像理解了，再在项目里用一下好使了就没去深入研究相关概念。等下次用到了还是搜一下，自己写不出来...于是笔者想想深入研究一下这些概念好摆脱尴尬的局面。
看了很多的文章，感觉有一些写的不够详细具体，要么就是概念的堆砌没有例子和图，要么就是一张图写满了各种概念不易于理解。于是笔者自己对照MDN文档总结了一下这些概念，并结合示例加深对这些概念的理解，并总结了这些概念彼此之间的数量关系和应用场景。欢迎大家阅读，有写错或者理解错的地方请不吝指正。
1.clientWidth、clientHeight、clientLeft、clientTop
1.1 clientWidth
（1）含义：只读属性，表示元素的内部宽度，单位为像素。
（2）从盒子模型角度看：包含padding，但不包含border, margin 以及垂直滚动条。
（3）注意：内联元素clientWidth为0。
（4）语法：element.clientWidth;
1.2 clientHeight
（1）含义：只读属性，表示元素的内部高度，单位为像素。
（2）从盒子模型角度看：包含padding，但不包含border, margin 以及水平滚动条。
（3）注意：内联元素clientHeight为0。
（4）语法：element.clientHeight;
1.3 clientLeft
（1）含义：只读属性，表示一个元素左边框的宽度，单位为像素。
（2）从盒子模型角度看：clientLeft 不包括左外边距和左内边距.
（3）语法：element.clientLeft
（4）备注：如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。
1.4 clientTop
（1）含义：只读属性，表示一个元素顶部边框的宽度，单位为像素。
（2）从盒子模型角度看：不包括顶部外边距或内边距
（3）语法：element.clientTop
1.5 示例演示
以如下的盒子模型来验证来看一下这些值以及计算过程（采用的例子是MDN上的，您可以打开控制台自己试一下）：
（1）首先控制台获取Dom元素：
const div = document.getElementById('iddiv') （2）然后在 Eelments->Computed 看盒模型：
（3）查看clientWidth的值：
clientWidth计算：内容宽度+左右padding即 182+28*2 = 182 + 56 = 238
（4）查看clientHeight的值：
clietentHeight计算：内容高度+上下padding即 102 + 0 = 102
（5）查看clientLeft和clientTop值：
clientLeft和clientTop计算：左边框 24 ； 上边框24
注意以上的计算过程是笔者在盒模型的设置为：box-sizing: content-box时的计算方法，如果盒模型设置为 box-sizing: border-box; 则计算clientWidth 和 clientHeight的方法为：
（1）clientWidth ：clientWidth 可以通过 CSS width+ CSS padding - 垂直滚动条宽度 (如果存在) 来计算
（2）clientHeight：clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在) 来计算
以clientWidth的计算为例说明一下
首先按照正常算法计算： 95 + 28*2 = 95 + 56 = 151 。151大于134 , 时因为还没有扣除滚动条的宽度，滚动条的宽度 为 151- 134 = 17 ， 量了一下滚动条的宽度确实为17，如下图所示：
2.offsetWidth、offsetHeight、offsetLeft、offsetTop
2.1 offsetWidth
（1）含义：只读属性，返回元素的布局宽度，单位像素。
（2）从盒子模型角度看：包含通过css设置的width，border, padding以及竖直方向滚动条的宽度。
（3）语法：element.offsetWidth
（4）备注：各浏览器的 offsetWidth 可能有所不同。
2.2 offsetHeight
（1）含义：只读属性，元素的布局高度，单位像素。
（2）从盒子模型角度看：包含通过css设置的height, border, padding以及水平方向滚动条的高度。
（3）语法：element.offsetHeight
（4）备注：如果元素被隐藏则返回0。
接下来要介绍offsetLeft和offsetTop的含义，在这之前要明白offsetParent的含义：
HTMLElement.offsetParent 是一个只读属性。
返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。
当元素的 style.display 设置为 "none" 时，offsetParent 返回 null
2.3 offsetLeft
（1）含义：只读属性，当前元素左上角相对于offsetParent左边界的偏移。
（3）语法：element.offsetLeft
（4）备注：如果元素被隐藏则返回0。
2.4 offsetTop
（1）含义：只读属性，当亲元素相对于offsetParent元素的顶部内边距的距离。
（3）语法：element.offsetTop
（4）备注：如果元素被隐藏则返回0。
2.5 示例演示
笔者写了一个demo用来说明如上概念，代码如下：
代码运行效果以及盒子模型如下图所示：
（1）获取内部div Dom元素
const div = document.getElementById('child-id') （2）查看offsetWidth的值
其计算过程：border 20 + pading 20 + content 183 + 滚动条 17 = 240。
也就是： 20 + 20 + 200= 240
如果设置 box-sizing:border-box 则对应的盒子模型变为：
此时查看offsetWidth的值：
其计算过程： content 160 + padding 20 + border 20 = 200 。我们观察实际效果：
发现虽然computed的盒子模型显示padding是10 ，但实际上并不是10了，而且由于滚动条的存在左右显示的padding所占空间已经不相等。
（3）读取offsetHeight值
计算过程与offsetWidth类似： 183 content + 17 滚动条 +20 padding + 20 border = 240。如果设置 box-sizing:border-box 则offsetHeight值如下：
（4）读取offsetTop和offsetLeft的值
如上我
