scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别

带你搞清楚 scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight 区别

clientHeight 和 offsetHeight 指的是元素的本身的高度，区别是 在元素设置
box-sizing: border-box时，clientHeight元素本身的高度 - 元素的边框；offsetHeight就是元素本身的高度
没有设置box-sizing: border-box时，clientHeight是元素的高度 + padding；offsetHeight是元素的高度 + padding + border

注：offsetHeight不管有没有滚动轴都不影响

clientTop指的是上边框的宽度

offsetTop指的是元素距离具有定位元素的父元素的距离(都是边框外面开始计算)

在有滚动的元素的时候

scrollHeight会随着子元素的高度变化而变化，即使自身固定高度出现滚动轴，包括padding和子元素撑大的部分

• scrollHeigh：元素内容的全部高度，包括content、溢出的content、padding、伪元素。不包括元素的border和margin
• clientHeight：元素的可见部分高度，包括content、padding。不包括元素的border和margin
• offsetHeight：元素的实际占据高度，包括content、padding、border、滚动条。不包括伪元素

scrollTop指的是元素的滚动距离， 可读可写的一个属性