元素滚到到底部原理

元素滚动到底部原理

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

posted @   全玉  阅读(394)  评论(0编辑  收藏  举报
编辑推荐:
· 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工具
点击右上角即可分享
微信分享提示