react添加onScroll事件踩坑

发布时间：2020-12-15 16:16:55 所属栏目：百科来源：网络整理

导读：需求:下拉列表做一个懒加载,?拉到最底下的时候加载新数据.?类似微博 ? 一开始用onScroll添加在div上面,?发现没有效果 ? 接着尝试了?document.getElementById("").onscroll?和 addeventlistener(‘scroll‘,func) 和ref等都没有用一度怀疑人生. ? 之后看了ov

需求:下拉列表做一个懒加载,?拉到最底下的时候加载新数据.?类似微博

一开始用onScroll添加在div上面,?发现没有效果

接着尝试了?document.getElementById("").onscroll?和 addeventlistener(‘scroll‘,func) 和ref等都没有用

一度怀疑人生.

之后看了overstack上的方法,也是用的onScroll,?但是人家就可以成功,?对比之后发现我的样式里面少了height.

onScroll一定要加在有height属性的容器上

代码:

const [page,setPage] = useState(1);
const [info,setInfo] = useState([]);

const onscroll = e => {
    if ( refresh && e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight < 1) {
      setPage(page+1)
    }
  };

useEffect(() => {
    fetch("...............",{
    })
      .then(res => res.json())
      .then(res => {
        setInfo(info.concat(res));
      });
  },[page]);

<div className={classes.content} onScroll={onscroll}>
{info}
</div>

content?样式必须带height.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!