理解offsetHeight、scrollHeight、clientHeight与js懒加载

### clientXXX(clientWidth/clientHeight)

clientWidth/clientHeight 【内容宽高+内边距】(content+padding)

理解offsetHeight、scrollHeight、clientHeight与js懒加载_第1张图片
### offsetXXX(offsetWidth/offsetHeight/offsetTop)

offsetWidth/offsetHeight【内容宽高+内边距+外边距+滚动条】(content+padding+border+margin)

理解offsetHeight、scrollHeight、clientHeight与js懒加载_第2张图片
### scrollXXX(scrollWidth/scrollHeight/scrollTop)

scrollWidth/scrollHeight 【内容宽高】包含超出不可见的滚动部分

理解offsetHeight、scrollHeight、clientHeight与js懒加载_第3张图片
### xxxTop

offsetTop 是当前元素顶部距离最近父元素顶部的距离,offsetTop大小固定,和有没有滚动条没有关系(如 有10张高度为100px,无margin,无border 的图片,第1张图片offsetTop为0,第二张图片offsetTop为100,第二张图片offsetTop为200...)

理解offsetHeight、scrollHeight、clientHeight与js懒加载_第4张图片

scrollTop 在有滚动条的情况下,为元素可视区域距离元素顶部的像素,也就是已经滚动了多少距离(**每张图片的scrollTop都是一样的,会随着滚动条高度变化**)

理解offsetHeight、scrollHeight、clientHeight与js懒加载_第5张图片

js懒加载

理解offsetHeight、scrollHeight、clientHeight与js懒加载_第6张图片


    
    
    
    
    
    
    
    
    
    

参考文章

https://www.cnblogs.com/enhah...
https://juejin.cn/post/684490...

你可能感兴趣的:(htmljavascript)