监听滚动条是否到底部

最新推荐文章于 2024-05-31 10:08:12 发布

p_coder

最新推荐文章于 2024-05-31 10:08:12 发布

阅读量1.3k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_54217534/article/details/126814245

版权

React 滚动事件自动加载数据分页滚动条

关键词由CSDN通过智能技术生成

以react为例

1.先设置滚动盒子的高度，然后加入overflow: auto，使超出部分变为滚动的

height: calc(100vh - 44px - 47px); // 给盒子一个确定的高度
overflow: auto; // 超出部分会出现滚动条

2.绑定滚动事件


const Scroll = () => {
    let height1 = myRef.current.clientHeight  // 可以得到我们设置的高度 (不包括滚动的高度)
    let height2 = myRef.current.scrollTop  // 当滚动时被卷去的高度
    let height3 = myRef.current.scrollHeight  // 全部的高度 包括滚动的高度
    if(height1 + height2 + 20 > height3 && flag){   // 当距离底部20 则会触发
        // 加了flag 是为了防止反复触发
      
      let page = getdata.pageNum
      const obj = {...getdata,pageNum: ++page}
      setdata(obj)
      setflag(false)
    }
 }
// onScroll绑定滚动事件 使用ref得到div标签
<div className={style.nowPlaying} ref={myRef} onScroll={Scroll}>

</div>