元素滚到到底部原理
元素滚动到底部原理
element.scrollHeight - element.scrollTop === element.clientHeight
另外一种判断方法(元素占据整屏适用)
element.getBoundingClientRect().bottom - element.clientHeight < threshold
1、判断滚动条滚动到最底端: scrollTop == (scrollHeight – clientHeight)
2、在滚动条距离底端50px以内: (scrollHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内: scrollTop / (scrollHeight – clientHeight) >= 0.95
事件处理如下:
var clientHeight = ele.clientHeight; // 元素窗口的高度(不会变) $(ele).scroll(function(event){ var scrollTop = ele.scrollTop; // 当前滚动条位置 var scrollHeight = ele.scrollHeight; // 滚动条总高度 if (scrollTop + clientHeight >= scrollHeight) { showMore(); } });
几种高度的区别:
clientHeight = height+padding-横向滚动轴高度,就是可视区域高度
offsetHeight = padding+height+border+横向滚动轴高度,可视区域加上滚动轴的高度
scrollHeight = 元素的滚动区域高度,大于等于offsetHeight
window的高度获取方法如下
var doc = document.documentElement || document.body; var scrollTop = doc.scrollTop; var scrollHeight = doc.scrollHeight; var clientHeight = doc.clientHeight;
屏幕的高度还可以使用
window.getBoundingClientRect().height || window.innerHeight
参考: https://blog.csdn.net/wangjun5159/article/details/54916404
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具