页面元素位置宽度的属性：clientWidth、offsetWidth、scrollWidth、clientTop、offsetTop、scrollTop...

clientWidth / clientHeight
offsetWidth / offsetHeight
scrollWidth / scrollHeight
clientLeft / clientTop
.offsetLeft / offsetTop
scrollLeft / scrollTop
元素位置宽度的属性：
1、clientWidth / clientHeight (width + padding - 滚动条 ) 标签内容的可视区域宽度 此属性只读

2、offsetWidth / offsetHeight (width + padding + border) 标签的实际宽度 此属性只读

3、scrollWidth / scrollHeight (滚动条滚到最右侧时候： clientWidth(包括padding) + scrollLeft，改变padding值不影响结果) 标签实际内容的宽度 此属性只读

4、clientLeft / clientTop （左边框的宽度） 此属性只读

5、offsetLeft / offsetTop (元素的border外侧 到具有定位的父元素的border内侧的距离，如果父级都没有定位，则到body左端的距离) 此属性只读

6、scrollLeft / scrollTop （元素内容的左侧 到 可视区域最左侧的距离,改变padding值不影响结果） 此属性可读写

例1： 持续获取网页被卷起来的高度：
window.addEventListener(‘scroll’, ()=>{
var scrollTop =document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
console.log(scrollTop);
});
例2：页面元素距离浏览器工作区顶端的距离
页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度
即：页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop -document.documentElement.scrollTop

参考阅读：
https://blog.csdn.net/qq_42089654/article/details/80515916
https://www.cnblogs.com/fnz0/p/5510758.html