滚动条的触底加载(原生和Vue实现三种方法)

满脑子技术的前端工程师

已于 2023-05-16 00:07:58 修改

阅读量4k

点赞数 4

分类专栏： JavaScript 文章标签： javascript vue 前端

于 2022-07-06 23:23:27 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/125649091

版权

JavaScript 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

滚动条的触底加载

提示 :今天后端同学有遇到关于滚动条触底加载的问题,他使用的是element-UI中的一个无限滚动(个人尝试使用了一下,感觉很垃圾,不推荐使用)

就手写了一个原生JS的方法,以前有做过类似的功能,有点忘却了,正好借这个机会,重新回顾一下!!!!!!!!!!!!!!!!!!!!!!!!!!!)

一、触底加载的原理

1.原理如下所示：

1.我这里采用的是: 页面被卷去的高度+可视的Dom高度(视口的高度,如下图所示)>=滚动条的长度

2 视口的高度+页面被卷去的高度=滚动条的长度 (这样理解会不会更简单一些)

请添加图片描述

2.代码如下所示

//对应的Api各个部分对应的Api如下
页面被卷去的高度: 
window.scrollY  ||  window.pageYOffset  || document.documentElement.scrollTop

视口的高度:  document.documentElement.clientHeight

滚动条的长度: document.documentElement.scrollHeight || document.body.scrollHeight 

(以上的Api都是在谷歌浏览器中使用的,其他的浏览器可能有一些不兼容,所以自己可以测试一下)

二、触底下载代码如下

1.原生JS实现触底加载，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 3000px;
            margin: 0 auto;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
<script>
    // 浏览器触底加载功能的实现
    /* 1.视口的高度+页面被卷去的高度=滚动条的长度 */
    window.addEventListener("scroll",function(){
        //页面被卷去的高度: window.scrollY 
        //页面被卷去的高度: window.pageYOffset
        //页面被卷去的高度: document.documentElement.scrollTop
        // console.log("页面被卷去的高度:",window.scrollY,window.pageYOffset,document.documentElement.scrollTop);
       
        // body页面的滚动条高度: document.body.scrollHeight
        // 整个页面你的滚动条高度: document.documentElement.scrollHeight
        // console.log(document.body.scrollHeight,document.documentElement.scrollHeight);

        // 可视页面的高度: document.documentElement.clientHeight
        // console.log(document.documentElement.clientHeight);

        if(document.documentElement.clientHeight+window.scrollY>=document.documentElement.scrollHeight){
            console.log("触底了!!!!");
        }

    })

</script>
</html>