js实现无限下划加载

首先新建一个html模板

<!DOCTYPE html>
<html lang="zh">
<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>test</title>
</head>
<body>
    <div id="main"></div>
</body>
</html>

实现加载内容的js,这里举一个简单的例子

function load(title) {
  // div
  let div = document.createElement("div");
  div.setAttribute("class", "test")
  // h2
  let h2 = document.createElement("h2");
  h2.appendChild(document.createTextNode("标题: " + title));
  div.appendChild(h2);
  // 添加
  document.getElementById("main").appendChild(div);
}

添加一个监听器,在网页浏览快要结束时添加新内容

// 设置初始时间
let time = new Date().getTime();
// 监听器
function eventHandle(e) {
  // 这里设置一个时间,原因是每次浏览器滚动条位置变动都会出发event
  // 加载较慢时可能会出现滚动条到底了,第一次触发的内容还未加载出来
  // 这里设置每200ms可以触发一次
  let t = new Date().getTime();
  if (t - time > 200) {
    time = t;
    // 浏览器上方内容的高度
    let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
    // 页面总高度
    let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight) - viewportHeight;
    // 滚动条高度
    let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    // 当页面浏览进度超过90%时使用鼠标滚轮触发
    if (scrollHeight / pageHeight > 0.9) load("awa");
  }
}
// 启用监听器 scroll是监听器名字
document.addEventListener('scroll', eventHandle);
// 删除监听器
document.removeEventListener('scroll', eventHandle);

这样的话一个简单的无限下划就完成了

最后贴一个demo

<!DOCTYPE html>
<html lang="zh">
<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>test</title>
    <style>
        #main {
            height: 1200px;
        }

        .test {
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script>
        function load(title) {
            // div
            let div = document.createElement("div");
            div.setAttribute("class", "test")
            // h2
            let h2 = document.createElement("h2");
            h2.appendChild(document.createTextNode("标题: " + title));
            div.appendChild(h2);
            // 添加
            document.getElementById("main").appendChild(div);
        }
        load("awa");
        // 设置初始时间
        let time = new Date().getTime();
        // 监听器
        let count = 1;
        function eventHandle(e) {
            // 这里设置一个时间,原因是每次浏览器滚动条位置变动都会出发event
            // 加载较慢时可能会出现滚动条到底了,第一次触发的内容还未加载出来
            // 这里设置每200ms可以触发一次
            let t = new Date().getTime();
            if (t - time > 200) {
                time = t;
                // 浏览器上方内容的高度
                let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                // 页面总高度
                let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight) - viewportHeight;
                // 滚动条高度
                let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                // 当页面浏览进度超过90%时使用鼠标滚轮触发
                if (scrollHeight / pageHeight > 0.9) {
                    for (let i = 0; i < 5; i++) {
                        load("第" + count + "次自动加载");
                    }
                    count++;
                }
            }
        }
        // 启用监听器 scroll是监听器名字
        document.addEventListener('scroll', eventHandle);
        // 删除监听器
        // document.removeEventListener('scroll', eventHandle);
    </script>
</body>
</html>

发送评论 编辑评论

发送评论编辑评论