怎么实现监听滑动某个元素到底部

背景

移动端对列表进行滑动，当滑动到底部后进行获取数据

重点

使用scroll监听滑动事件，并通过以下属性来计算距离底部的数值

1. scrollHeight
2. offsetHeight
3. scrollTop

实现

1. 获取元素

const tableContainer = document.querySelector('.table-content') as any;

2. 添加监听事件

tableContainer.addEventListener("scroll",scrollFn)

3. 处理函数

function scrollFn() {
    //计算滚动条距离底部的数值
    const distanceFromBottom = tableContainer.scrollHeight - tableContainer.offsetHeight - tableContainer.scrollTop;
    if(distanceFromBottom <= 10){
        //当距离底部10以下便会触发
        loadMoreData();
    }
}

此时已经完成了滚动条触碰到底部进行获取数据，但是它会触发很多次，原因是在不断的滑动的时候函数也一直在被触发，所以这里用settimeout 实现，使用节流、防抖也是可以的。

4.最终版

let isLoading = false; //滑动过程阻止进入
let timer;//执行器

function scrollFn() {
    //计算滚动条距离底部的数值
    const distanceFromBottom = tableContainer.scrollHeight - tableContainer.offsetHeight - tableContainer.scrollTop;
    if( !isLoading && distanceFromBottom <= 10){
        isLoading = true;
        clearTimeout(scollTimer);
        // 停止滑动后500毫秒执行
        scollTimer = setTimeout(() => {
              loadMoreData();
              isLoading = false;
        }, 500);
    }
}