Javascript实现滚动加载_js 判断接口数据加载完触发滚动-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42684309/article/details/98875626

本文介绍了一种不依赖插件的滚动加载实现方法，通过监听滚动事件并比较文档实际高度、滚动距离及窗口可视高度，自动加载更多数据。适用于数据量大的页面，提升用户体验。

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

当我们页面数据量过多时我们常常会用到滚动加载，那除了插件以外我们怎么实现滚动加载呢？

首先我们先考虑滚动加载都需要哪些变量来做比较：

1.文档内容实际高度：
document.documentElement.scrollHeight，document.body.scrollHeight

2.滚动条滚动距离：

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

3.窗口可视高度：

document.documentElement.clientHeight，document.body,clientHeight

那么我们需要在window.onscroll滚动事件中来进行逻辑处理

window.onscroll = function(){
    //文档内容实际高度（包括超出视窗的溢出部分）
    var scrollHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)
    //滚动条滚动距离
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    //窗口可视范围高度
    var clientHeight = window.innerHeight || Math.max(document.documentElement.clientHeight,document.body,clientHeight)
    if(clientHeight + scrollTop >= scrollHeight){
	    console.log("滚动加载开始")
	    //判断当前数据是否已经加载结束
        //此时我是先实例化了一个Vue对象vm
	    if(vm.show3 != true){//show3是来控制“没有更过数据”的dom节点的显示与隐藏
            //show2是用来控制“正在加载...”的dom节点的显示与隐藏
		    vm.show2 = true
            //调用数据列表接口实现数据加载
		    vm.loadList()
	    }
    }
}

然后通过在loadList()里做数据处理之后，滚动加载效果就完成了。