scroll 家族

offsetParent:与当前元素最近的经过定位的父级*元素

1. 元素自身有定位 fixed,offsetParent 是 null
2. 元素自身无 fixed 定位,offsetParent 是 body
3. 元素自身无定位,父级元素存在定位,offsetParent 是以最近的经过定位的父级元素
4. body 元素的 offsetParent 是 null

offsetWidth 和 offsetHeight

• offsetwidth= width+border(左右)+padding(左右)
• offsetwidth= width+border(上下)+padding(上下)

client

所有client 属性都是可读的

1. clientwidth
2. clientHeight
3. clientLeft 左边框的大小
4. clientTop 上边框的大小

如果给元素设置 display:none 客户端 client属性都为 0

//避免重复访问这些属性
console . time ( time ' ) ; var b = box . clientHeight
for ( var i = 0 ; i < 100000 i + + )
var a
console . timeEnd ( time ) : / / ime : 200 . 823974609375ms

scroll 家族

scrollHeight 表示元素的总高度,包含由于溢出而无法在网页上的不可见 scrollTop 元素被卷起的高度

<div id=“captcha”>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</div>
<script>
    var box=document.getElementById(“captcha”);
    box.onscroll=function () {
        console.log(box.scrollTop,box.scrollHeight);
			//	当滚动条滚动到内容底部时候,符合以下公式
			//scrollHeight=clientHeight+scrollTop
			
    }

JavaScript从入门到放弃 第五章 offset、client、scroll家族_哔哩哔哩_bilibili