js滚动到底部加载

Mr.谭先生

于 2019-07-16 09:30:00 发布

阅读量800

点赞数

分类专栏：前端文章标签： js js滚动加载

本文链接：https://blog.youkuaiyun.com/feiningtan/article/details/96101370

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript判断页面滚动到底部，并实现滚动加载功能。关键在于利用scrollTop、offsetHeight和scrollHeight这三个DOM属性来检测滚动状态。

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

判断滚动条到底部，需要用到DOM的三个属性值：
- scrollTop：滚动条在Y轴上的滚动距离
- offsetHeight：为内容可视区域的高度
- scrollHeight：为内容可视区域的高度加上溢出（滚动）的距离

//jquery
$('.container').scroll(function(){
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(this)[0].scrollHeight;
    var clientHeight = $(this)[0].offsetHeight;
    if(scrollTop + clientHeight == scrollHeight){
		alert("已经滑到底部了");
    }
});
//原生js
window.onscroll = function () {
    //滚动条y轴上的距离
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //可视区域的高度
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //可视化的高度与溢出的距离（总高度）
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    if(scrollTop + clientHeight == scrollHeight){
             alert('已滚动到底部!')
         }
     }