【前端 | CSS】滚动到底部加载，滚动监听、懒加载

背景

在日常开发过程中，我们会遇到图片懒加载的功能，基本原理是，滚动条滚动到底部后再次获取数据进行渲染。

那怎么判断滚动条是否滚动到底部呢？滚动条滚动到底部触发时间的时机和方法又该怎样定义？

针对以上问题我做了以下总结：

如何判断滚动条已经滚动到底部

先看一张图片解析

从图中不难看出：

滚动条滚动的最大距离+父盒子的高度 = 子盒子的高度；

也就是说子盒子的高度-父盒子的高度>=滚动距离时，滚动条触底；

那如何获取盒子的高度和滚动距离

大多数情况下子元素的高度是不确定的，会随着图片的加载子元素的高度越来越高，

我们可以通过

elemet.scrollHeight 获取子盒子的高度；

elemet.scrollTop 获取滚动距离；

elemet .clientHeight 获取父盒子的高度；

参考

【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight_好喝的西北风的博客-CSDN博客只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在）offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。https://blog.csdn.net/weixin_43340372/article/details/132210911?spm=1001.2014.3001.5501

示例代码

HTML

  
    
    
    

    
  

  
    

      

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      
    
  

js

style

线上示例

滚动加载线上示例