offset
- offsetWidth / offsetHeight 这个是自身的一个绝对宽度/ 高度
元素自身的宽度(含border) width 属性值 + 左右 padding + 左右 border + 垂直滚动条宽度
- offsetTop / offsetLeft 距离上方元素或者上方控件距离
距离最近的 定位 父元素(顶部/左侧)距离 如果没有定位就是根元素body的(顶部/左侧)距离
scroll
-
scrollWidth / scrollHeight
scrollWidth 滚动宽度 对象实际宽度 包括内容区和内边距,不包括边框。
scrollHeight 滚动高度 对象实际高度 包括内容区和内边距,不包括边框。
-
scrollTop / scrollLeft
scrollTop 就是被卷起的高度 元素的最顶端到 可见区域顶部的高度
scrollLeft 就是被卷起左侧宽度 元素的最左边到 可见区域左侧的宽度
client
- clientWidth / clientHeight
可见区域的宽度高度 随窗口大小变化
- clientTop / clientLeft
元素的厚度 就是上左border 左border
getBoundingClientRect
const {width, height} = el.getBoundingClientRect()获取位置信息
懒加载部分代码
判断元素的offsetTop 跟可见区域高度+ scrollTop element.offsetTop document.body.clientHeight + document.body.scrollTop 复制代码