关于react.js:react使用windowonscroll不起作用的问题

做滚动加载的过程中发现，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);
    });
   

如果有问题，感激斧正，如果帮忙到您 1 分也是爱
!