react使用window.onscroll不起作用的问题

Posted 2021-09-09 幸福是奋斗出来的

做滚动加载的过程中发现，window.onsrcoll在react函数式组件中，不起作用，写在生命周期里也还是不行，几经周折，终于搞定

   1.
   useEffect(()=> {
        // 1.绑定滚动元素并添加scroll事件，组件销毁时移除
        const scrollDom = document.getElementById(\'wrapper\') 
        scrollDom.addEventListener(\'scroll\', handleScroll)
        return () => scrollDom.removeEventListener(\'scroll\', handleScroll); 
    }, [handleScroll])
   2.
    const handleScroll = useCallback(event => {
        const height = scrollEvent(event)
        if (hasMore && height <= 60) {
            const t =pageIndex+1;
            setPageIndex(t);
            setHasMore(false); // 需要改变状态不然会瞬间加载完所有
        }
    }, [hasMore,pageIndex])
   3. 计算距离底部的距离
      const scrollEvent = event => {
        if (!event.srcElement.scrollTop) {
           // 处理向上使劲滚动的时候scrollTop为undefined
           return undefined
         }
         // 滚动的高度
         const scrollTop =
           (event.srcElement ? event.srcElement.scrollTop : false) ||
           window.pageYOffset ||
           (event.srcElement ? event.srcElement.body.scrollTop : 0)
         // 视窗高度
         const clientHeight = (event.srcElement && event.srcElement.clientHeight) || document.body.clientHeight
         // 页面高度
         const scrollHeight = (event.srcElement && event.srcElement.scrollHeight) || document.body.scrollHeight
         // 距离页面底部的高度
         const height = scrollHeight - scrollTop - clientHeight
       
         return height
    }
    4.监听页数变化请求数据
     useEffect(() => {
        getData();
    }, [pageIndex]);
    5.
    axios().then(res=> {
          if(!res||res.length === 0){
                 setHasMore(false);
                 return;
          }
          const newList = dataArr.concat(res);
          setDataArr(newList);
          setHasMore(true);
    });
   

记得要给绑定的滚动元素添加高度和overflow:atuo呀！
如果有问题，感谢指正