向下滚动加载_滚动加载限制向下滚动才加载-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41108537/article/details/106279571

IntersectionObserver

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        #root li{
            height: 300px;
        }
    </style>
</head>
<body>
    <ul id="root">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="./observe.js"></script>
</body>
</html>

//节点存储
let root = document.getElementById("root");
let rootK1 = root.firstElementChild;
let rootK2 = rootK1.nextElementSibling;
let rootK3 = rootK2.nextElementSibling;
let rootK4 = rootK3.nextElementSibling;
let rootK5 = rootK4.nextElementSibling;

//判断长度是否可以进行全屏加载
if (root.scrollHeight - rootK5.scrollHeight > window.innerHeight) {
    let rootObserve = new IntersectionObserver(MutationObserverHandle)
    //观察左后一个子元素
    rootObserve.observe(rootK5);
    let num = 0;
    //注册下拉事件内容
    function MutationObserverHandle(ele) {
        let [{ isIntersecting }] = ele;
        if (isIntersecting) {
            num++;
            root.style.paddingTop = parseFloat(root.style.paddingTop || 0) + computedHeight() + "px";
            changeText();
        }
    }
    //计算修改的padding高度
    function computedHeight() {
        return root.scrollHeight - parseInt(root.style.paddingTop || 0) - rootK5.scrollHeight - window.innerHeight
    }
    //修改节点内容
    function changeText() {
        rootK1.innerHTML = num + 0;
        rootK2.innerHTML = num + 1;
        rootK3.innerHTML = num + 2;
        rootK4.innerHTML = num + 3;
        rootK5.innerHTML = num + 4;
    }
}

scroll事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .root-container{
            overflow-y: scroll;
            height: 100vh;
            margin: 0;
        }
        #root li{
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="app" class="root-container">
        <ul id="root">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script src="./scroll.js"></script>
</body>
</html>

let root = document.getElementById("root");
let app = document.getElementById("app");

let rootK1 = root.firstElementChild;
let rootK2 = rootK1.nextElementSibling;
let rootK3 = rootK2.nextElementSibling;
let rootK4 = rootK3.nextElementSibling;
let rootK5 = rootK4.nextElementSibling;

//判断是向上还是向下滑动,上false,下true
let scrollDirection = (function () {
    let scrollHeight = app.scrollTop;
    return height => {
        if (height > scrollHeight) {
            scrollHeight = height;
            return true
        } else {
            scrollHeight = height;
            return false;
        }
    }
})();
let num = 0;
//为根节点添加滚动监听事件
app.addEventListener("scroll", event => {
    let { target } = event;
    //向下
    if (scrollDirection(target.scrollTop)) {
        if (target.scrollHeight - target.clientHeight - target.scrollTop <= rootK5.scrollHeight / 2) {
            num++;
            root.style.paddingTop = parseFloat(root.style.paddingTop || 0) + rootK5.clientHeight + "px";
            changeText();
        }
    } else if (num > 0) {
        if (target.scrollTop <= parseInt(root.style.paddingTop)) {
            num--;
            root.style.paddingTop = parseFloat(root.style.paddingTop || 0) - rootK5.clientHeight + "px";
            changeText();
        }
    }
});

function changeText() {
    rootK1.innerHTML = num + 0;
    rootK2.innerHTML = num + 1;
    rootK3.innerHTML = num + 2;
    rootK4.innerHTML = num + 3;
    rootK5.innerHTML = num + 4;
}