JavaScript | 如何判断页面是否滚动到底部?

在 JavaScript 中,我们可以通过一些技巧来判断页面是否滚动到底部。本文将介绍一些常用的方法,帮助你在项目中实现这一功能。

判定页面到达底部

JS:

javascript 复制代码
// HTML 文档返回对象为HTML元素
let docEl = document.documentElement;
// 浏览器可视部分的高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('scroll', function () {
  // 页面中内容的总高度
  let docELHeight = docEl.scrollHeight; 
  // 页面内已经滚动的距离
  let scrollTop = docEl.scrollTop; 
  // 页面上滚动到底部的条件
  if (scrollTop == docELHeight - clientHeight) {
    // 页面内已经滚动的距离 = 页面中内容的总高度 - 浏览器可视部分的高度
    console.log('到达底部了!');
  }
});

判定元素内滚动到达底部

CSS:

css 复制代码
div {
  overflow: auto;
  margin: 250px auto;
  width: 80px;
  height: 100px;
  background-color: rgb(204, 126, 255);
}

HTML:

html 复制代码
<div>
  保护大自然
  保护大自然
  保护大自然
  保护大自然
  保护大自然
  保护大自然
  保护大自然
</div>

JS:

javascript 复制代码
// 获取元素
let div = document.querySelector('div');
// div中内容的总高度
let scrollHeight = div.scrollHeight; 
// 给div添加滚动事件
div.addEventListener('scroll', function () {
  // div 内已滚动的距离
  let scrollTop = div.scrollTop; 
  // 元素内滚动条到底部的条件
  if (scrollTop == scrollHeight - div.clientHeight) {
    // div 内已滚动的距离 = div中内容的总高度 - div 元素的高度
    console.log('到达底部了!');
  }
});
相关推荐
花生侠18 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
猿榜20 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
阿幸软件杂货间24 分钟前
阿幸课堂随机点名
android·开发语言·javascript
一涯26 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调33 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab33 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined234 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端