原生js判断滚动条滚到底部

本文介绍在开发中如何利用原生JavaScript准确判断滚动条到达页面底部,以实现滚动加载或显示提示的功能。同时,文章讨论了可能遇到的问题,如过早触发、多次触发以及获取ScrollTop值异常等,并提供了两个可靠的原生解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如题

开发中经常遇到,滚动条滚到底部加载下一页,或者给出提示的需求,也踩过一些坑。

坑的表现:

1)还没到底部,就已经触发了加载下一页的方法(以前遇到过,但是错误的代码已经忘了)

2)多次触发,导致多次调用或者一些异常情况

3)在滚动的时候,偶尔会出现ScrollTop值为空或者undefined的情况

网上的方法不一定奏效的,贴两个原生解决方法:

//滚动条在Y轴上的滚动距离
function getScrollTop() {
    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    if (document.body) {
        bodyScrollTop = document.body.scrollTop;
    }
    if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
}
//文档的总高度
function getScrollHeight() {
    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    if (document.body) {
        bodyScrollHeight = document.body.scrollHeight;
    }
    if (docume
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值