js触底加载

瑶骨

已于 2023-02-01 21:57:40 修改

阅读量520

点赞数 1

文章标签：前端 html javascript Powered by 金山文档

于 2023-01-08 20:40:18 首次发布

本文链接：https://blog.csdn.net/qq_47243637/article/details/128605367

版权

element.clientHeight	返回自身包括padding 内容区的高度，不含边框
element.clientWidth	返回自身包括padding 内容区的宽度，不含边框
element.scrollTop	返回卷去的上侧距离
element.scrollLeft	返回卷去的左侧距离
element.scrolWidth	返回自身实际的宽度
element.scrolHeight	返回自身实际的高度和内容的实际大小
element.offsetTop	返回自己距离上侧的距离
element.offsetLeft	返回自己距离左侧的距离
element.offsetY	返回Y轴相对与事件源的距离
element.offsetX	返回X轴相对与事件源的距离
element.offsetWidth	返回自身包括 padding 边框内容区的宽度
element.offsetHeight	返回自身包括 padding 边框内容区的高度
element.scrollIntoView	谁调用这个函数，就将谁和可视窗口的底部或者顶部对齐
console.log(document.documentElement.clientHeight)	屏幕可视区域高度
console.log(document.documentElement.clientHeight	屏幕可视区域高度
console.log(document.documentElement.scrollHeight)	整个页面内容的高度包括视图中不可见的内容
console.log(document.documentElement.scrollTop)	页面被卷去的距离

<!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: 1230px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .one {
            width: 300px;
            height: 210px;
            display: inline-block;
            margin-bottom: 10px;
        }

        .one img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
        let box = document.querySelector('#box')
        for (let i = 0; i < 40; i++) {
            box.innerHTML += `<div class='one'><img src="https://res.vmallres.com/cmscdn/CN/2022-12/b0041527eddd4c82866f9e2c286c9313.png" alt=""></div>`
        }
        let one = document.querySelectorAll('.one')
        window.onscroll = function () {
            let scrollTop = document.documentElement.scrollTop // 获取页面卷出的距离
            let clientHeight = document.documentElement.clientHeight // 获取可视窗口的高度
            let scrollHeight = document.documentElement.scrollHeight // 获取页面内容和包括不可见的内容的高度
            // 页面卷出的距离 + 可视窗口的高度 + 100 >= 内容和包括不可见的内容的高度
            if (scrollTop + clientHeight + 100 >= scrollHeight) {
                for (let i = 0; i < 8; i++) {
                    box.innerHTML += `<div class='one'><img src="https://res.vmallres.com/cmscdn/CN/2022-12/b0041527eddd4c82866f9e2c286c9313.png" alt=""></div>`
                }
            }
        }
    </script>
</body>

</html>