当前位置：首页 > news >正文

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

news 2025/9/17 7:08:14

背景

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

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

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

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

先看一张图片解析

从图中不难看出：

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

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

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

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

我们可以通过

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

<!DOCTYPE html>
<html lang="CH-EN"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width" /><title>flex</title></head><body><div class="container"><div class="item">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div></body>
</html>

<script>window.onload = () => {// 基本思路// 滚动体条所能滚动的最大高度 + continer的高度 = 子盒子（item）的高度；const container = document.querySelector(".container");console.dir(container);const item = document.querySelector(".item");container.addEventListener("scroll",() => {// 父盒子的高度const clientHeight = container.clientHeight;// 子盒子的高度（滚动盒子的高度）const scrollHeight = container.scrollHeight;// 滚动的最大距离const scrollHeight_clientHeight = scrollHeight - clientHeight;// 实时滚动距离const scrollTop = container.scrollTop;// 滚动的最大距离小于等于实时滚动距离时，滚动到了底部if(scrollHeight_clientHeight <= scrollTop){console.log("滚动到底部");}})};
</script>

style

<style>body,html {height: 100%;overflow: hidden;margin: 0;padding: 0;}::-webkit-scrollbar {width: 10px;background-color: gray;}::-webkit-scrollbar-thumb {background-color: black;border-radius: 5px;}.container {height: 500px;width: 400px;margin: 100px auto;background-color: rgb(6, 100, 64);border: blue 5px solid;overflow: auto;}.item {height: 800px;width: 200px;margin: 0 auto;color: #fff;line-height: 200px;overflow: hidden;background-color: rgb(235, 77, 77);}
</style>

线上示例

滚动加载线上示例

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

背景

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

先看一张图片解析

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

参考

示例代码

相关文章：

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

word将mathtype公式批量转为latex公式

docker-compose部署nacos 2.2.3

软件测试52讲-学习笔记

【ARM 嵌入式编译系列 4 -- GCC 编译属性 __read_mostly 详细介绍】

Maven在IDEA2021版本中全局配置（一次配置处处生效）

名侦探番外——Arduino“炸弹”引爆摩天大楼

自适应AI chatgpt智能聊天创作官网html源码

防抖，节流

【Linux】多线程1——线程概念与线程控制

【Maven】SpringBoot项目使用maven-assembly-plugin插件多环境打包

指令集_基础

学习Vue:数据绑定的基本概念

Python 装饰器 - 推导式(列表推导式) - 迭代器 - 生成器 - 闭包

【大数据】Flink 详解（二）：核心篇 Ⅲ

Jmeter性能测试系列-性能测试需求分析

Syncfusion Essential Studio JavaScrip Crack

8.13黄金是否进入下行通道？下周开盘如何布局

Idea的基本使用带案例---详细易懂

MySQL中的用户管理

TDengine 快速体验（Docker 镜像方式）

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

页面渲染流程与性能优化

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

12.找到字符串中所有字母异位词

《基于Apache Flink的流处理》笔记

QT： `long long` 类型转换为 `QString` 2025.6.5

【生成模型】视频生成论文调研