JS属性scrollTop clientHeight scrollHeight理解学习

2024-12-10 11:57:17

引言

在开发中我们常常会用到判断滚动条是否触底的逻辑。我一般都会在网上搜一段代码，这段代码有用到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用来说明如上概念，代码如下：

<html lang="en">
    <head>
        <style>
            .parent {
                    width: 400px;
                    height: 400px;
                    border: 1px solid #ccc;
                    padding-top: 50px;
                    padding-left: 20px;
            }
            .child {
                    width: 200px;
                    height: 200px;
                    padding: 10px;
                    border: 10px solid black;
                    overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child" id="child-id">
                    <!-- 省略内部内容 -->
            </div>
        </div>
    </body>
</html>

代码运行效果以及盒子模型如下图所示：

（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的值

如上我们发现offsetParent为body元素，那么offsetTop值为59 ， offsetLeft的值为29,都是怎么算出来的啊？看一下body以及class为parent的外层div的盒模型结构：

参考盒子模型结构我们可以得到计算过程：

offsetTop : 8 (body padding) + 1 (parent border) +50 (parent padding) = 59

offsetLeft: 8 (body padding) + 1 (parent border) + 20 (parent padding) = 29

3.scrollLeft、scrollTop、scrollWidth、scrollHeight

3.1 scrollLeft

（1）含义：可读取可设置，一个元素的内容水平滚动的像素数（滚动条到元素左边的距离）。

（2）语法：Element.scrollLeft

（3）备注：注意如果这个元素的内容排列方向是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为 0。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。

3.2 scrollTop

（1）含义：可读取可设置，一个元素的内容垂直滚动的像素数。

（2）语法：Element.scrollTop

（3）备注：一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。注意，这里并没有描述为滚动条距离顶部的距离，当然这样理解也没问题。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

3.3 scrollWidth

（1）含义：只读属性，是一个元素内容宽度的度量，包括由于溢出导致的视图不可见内容。

（2）语法：Element.scrollWidth

（3）备注：没有水平滚动条的情况下，scrollWidth 值与元素视图填充所有内容所需要的最小值clientWidth相同。

3.4 scrollHeight

（1）含义：只读属性，是一个元素内容高度的度量，包括由于溢出导致的视图不可见内容。

（2）语法：element.scrollHeight

（3）备注：没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值clientHeight相同。

为了说明scrollHeight 的含义，MDN文档给出了如下的示意图：

3.5 示例演示

示例代码任然沿用2.5 节的demo示代码，运行效果如下：

（1）查看scrollLeft的值

如上图所示：水平方向上滚动条没有向右滚动时，则scrollLeft的值为0。

如上图所示：水平方向滚动条向右滚动了一定距离，则此时scrollLeft的值为58。

（2）查看scrollTop的值

如上图所示：竖直方向上滚动条没有向下滚动时，则scrollTop的值为0。

如上图所示：竖直方向上滚动条没有向下滚动了一定距离，则此时scrollTop的值为59。

（3）查看crollWidth的值

如上图所示：scrollWidth的值为704，代表内容的宽度。

（4）查看scrollHeight的值

如上图所示：scrollHeight的值为262，代表内容的高度。

4.彼此之间的数量关系以及应用

（1）关系1

没有竖直方向上的滚动条： scrollHeight = clientHeight

应用：判断竖直方向是是否有滚动条

（2）关系2

没有水平方向上的滚动条：scrollWidth = clientWidth

应用：判断水平方向是否有滚动条

（3）关系3

scrollTop + clientHeight >= scrollHeight

因为scrollTop是一个非整数，而scrollHeight和clientHeight是四舍五入的，因此确定滚动区域是否滚动到底的唯一方法是查看滚动量是否足够接近某个阈值：

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1

5.总结

一图胜千言，本文的全部内容如下：

以上就是JS属性scrollTop clientHeight scrollHeight理解学习的详细内容，更多关于JS属性scrollTop clientHeight scrollHeight的资料请关注我们其它相关文章！

解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此
js中scrollTop()方法和scroll()方法用法示例

本文实例讲述了js中scrollTop()方法和scroll()方法用法.分享给大家供大家参考,具体如下: 设置滚动条据顶部的高度: $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度: $("div").scrollTop()://获得 scroll top offset 触发滚动事件 $(selector).scroll() 将函数绑定到滚动事件中: $(selector).scro
js浏览器滚动条卷去的高度scrolltop(实例讲解)

1.之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是"只读"的属性-> 只能通过属性获取值,不能通过属性修改元素的样式 2.scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一"可读写"的属性) box.scrollTop = 0 // 直接回到容器的顶部我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算. 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95 clientTop,只读一
JS中完美兼容各大浏览器的scrolltop方法

1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop : Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接
JS属性scrollTop clientHeight scrollHeight理解学习

目录引言 1.clientWidth.clientHeight.clientLeft.clientTop 1.1 clientWidth 1.2 clientHeight 1.3 clientLeft 1.4 clientTop 1.5 示例演示 (1)首先控制台获取Dom元素: (2)然后在 Eelments->Computed 看盒模型: (3)查看clientWidth的值: (4)查看clientHeight的值: (5)查看clientLeft和clientTop值: 2.offse
Vue 3.0的attribute强制行为理解学习

目录理解property和attribute property 形容词名词 attribute vue3中的property和attribute xml中的属性节点 vue3.0的attribute强制行为源代码分析 vue3.0的变化理解property和attribute 这个要看具体的语境了.不过我们可以从词源的角度来区分一下这两者: property 形容词 property的词源可追溯到proper,意为合适的,适当的. 短语示例: a proper job 一份合适(自己的)
关于JS 预解释的相关理解

1.JS中的内存空间分为两种:栈内存.堆内存栈内存:提供JS代码执行的环境;存储基本数据类型的值; ->全局作用域或者私有的作用域其实都是栈内存堆内存:存储引用数据类型的值(对象是把属性名和属性值存储进去,函数是把函数体中的代码当做字符串存储进去) 2.当浏览器加载我们HTML页面的时候,首先会提供一个供JS代码执行的环境->全局作用域(global->window) 3.在JS代码执行之前,浏览器还需要自己做一些事情:把所有带var/function关键字的进行提前的声明或者定义
关于vue.js过渡css类名的理解(推荐)

首先附上官方文档图. 总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想在一起,在经过多方的查找,总算是理解了,以下就是我所理解的意思,希望对路过的有所帮助,更希望路过的能帮我检查检查. start: 首先,通过一个例子来说明,实践是检验真理的唯一标准. 结果:点击按钮,show=false时,div消失:再次点击,show=true,div用蓝色逐渐
对于js垃圾回收机制的理解

原理找到不再被使用的变量,然后释放其占用的内存,但这个过程不是时时的,因为其开销比较大, 所以垃圾回收器会按照固定时间间隔周期性的执行回收方式 a.标记清除当变量进入环境时,将这个变量标记为"进入环境";当变量离开环境时,则将其标记为"离开环境". 标记"离开环境"的就回收内存 b.引入计数(低级浏览器) 当变量声明,第一次赋值时记为1,然后当这个变量值改变时,记录为0,将计数为0的回收内存泄露 a.意外的全局变量引起的内存泄露原因:
JS回调函数 callback的理解与使用案例分析

本文实例讲述了JS回调函数 callback的理解与使用.分享给大家供大家参考,具体如下: 基本理解一个概念回调函数回头再调用函数,等主干事情干完了,再回头干分支上的事情. 官方定义 A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 实例1 //定义主函数,回调函数作为参数 func
JS桶排序的简单理解与实现方法示例

本文实例讲述了JS桶排序的简单理解与实现方法.分享给大家供大家参考,具体如下: 桶排序,利用编号分组存储数字,再利用编号合并分组的一种算法排序. 举个易于理解的例子: 一组数字,9,3,4,0,2,8,5,1,7,6,11,10,18,15,17,12,16,13,19,14 我们把这组数字分组编号成10个桶装起来,但怎么编号分组呢? 这里我们利用数字范围来对数字进行分桶.首先,最大数减去最小数,获取这组数字的取值范围,然后,我们让这个取值范围除以桶数,获取一个桶的取值范围,既然知道一个桶的取值
js属性对象的hasOwnProperty方法的使用

Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性. 判断自身属性是否存在 var o = new Object(); o.prop = 'exists'; function changeO() { o.newprop = o.prop; delete o.prop; } o.hasOwnProperty('prop'); // true changeO(); o.hasOwnProperty('prop'); // false 判断自身属

JS属性scrollTop clientHeight scrollHeight理解学习

目录

引言

1.clientWidth、clientHeight、clientLeft、clientTop

1.1 clientWidth

1.2 clientHeight

1.3 clientLeft

1.4 clientTop

1.5 示例演示

（1）首先控制台获取Dom元素：

（2）然后在 Eelments->Computed 看盒模型：

（3）查看clientWidth的值：

（4）查看clientHeight的值：

（5）查看clientLeft和clientTop值：

2.offsetWidth、offsetHeight、offsetLeft、offsetTop

2.1 offsetWidth

2.2 offsetHeight

2.3 offsetLeft

2.4 offsetTop

2.5 示例演示

（1）获取内部div Dom元素

（2）查看offsetWidth的值

（3）读取offsetHeight值

（4）读取offsetTop和offsetLeft的值

3.scrollLeft、scrollTop、scrollWidth、scrollHeight

3.1 scrollLeft

3.2 scrollTop

3.3 scrollWidth

3.4 scrollHeight

3.5 示例演示

（1）查看scrollLeft的值

（2）查看scrollTop的值

（3）查看crollWidth的值

（4）查看scrollHeight的值

4.彼此之间的数量关系以及应用

5.总结

相关推荐

随机推荐