js 滚动条懒加载数据

见怪不怪丶

于 2022-12-15 16:22:32 发布

阅读量283

点赞数

分类专栏：工作日记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/HQqHQhqqhq/article/details/128331404

版权

工作日记专栏收录该内容

83 篇文章 1 订阅

订阅专栏

判断滚动条到底部，需要用到DOM的三个属性值，即clientHeight、scrollTop、scrollHeight。（横向滚动条则是clientWidth，scrollLeft，scrollWidth）

clientHeight为内容可视区域的高度。

scrollTop为滚动条在Y轴上的滚动距离。

scrollHeight为内容可视区域的高度加上溢出当前DOM容器的距离，即内容的总高度。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即：
clientHeight + scrollTop === scrollHeight

const dom = document.getElementById('scrollElement');
dom.addEventListener('scroll', () => {
    const clientHeight = dom.clientHeight;
    const scrollTop = dom.scrollTop;
    const scrollHeight = dom.scrollHeight;
    if (clientHeight + scrollTop === scrollHeight) {
        console.log('竖向滚动条已经滚动到底部')
    }
})