检查用户是否到达页面底部 React

Question

你好，我想要检查用户是否滚动到了页面底部。

我正在使用以下函数进行检查：

const handleScroll = (event) => { 
    const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;

    if(bottom){
        console.log('hello');
    }
}

但问题是我的应用程序看起来像这样：

目前，函数仅在内部滚动条位于底部时才起作用。但是我希望它在外部滚动条到达底部时触发。

整个代码如下：

 const handleScroll = (event) => { 
        const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;

        if(bottom){
            console.log('hello');
        }
    }

    return (
        <div className='main' onScroll = {handleScroll}>
            <div className='project-counter'>{filteredProjects.length > 0 ? (<p>Gevonden projecten : {filteredProjects.length}</p>) : null}</div> 
            {pro.map(project => (
                <div className='view-container' key={project._id}>
              
                    <div className='hours-container'>
                        <table>
                            <tr>
                                <th className='tb-first'>Datum</th>
                                <th className='tb-first'>medewerker</th>
                                <th>Dienst</th>
                                
                                <th>Toelichting</th>
                                <th>Aantal</th>
                            </tr>

                            {project.projectHours.map(hour => (
                                <tr>
                                    <td>{hour.created_at}</td>
                                    <td>{hour.employee.name}</td>
                                    <td>{hour.type.label}</td>
                                    <td>{hour.note}</td>
                                    <td>{hour.hours.toFixed(2)}</td>
                                </tr>
                            ))}

                        </table>
        
                    </div>

                </div>
            ))}

               
        </div>
    )

- Kevin.a

---

将监听器添加到窗口对象。 - marzelin

@marzelin，我不是完全确定我应该如何做这件事。 - Kevin.a

查看交叉观察器。 - Tilak Madichetti

Answer 1

将侦听器添加到window对象：

const App = () => {
  const handleScroll = () => {

    const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight

    if (bottom) {
      console.log('at the bottom');
    }
  };
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll, {
      passive: true
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div className = "" >  < /div>

};

ReactDOM.render( < App / > , document.getElementById("root"));

. {
  height: 200vh;
  width: 100%;
  background-color: mediumseagreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
<div id="root"></div>

- marzelin

Answer 2

在我看来，你的内部滚动条似乎属于你的div。你有一个更高级别的组件吗？尝试在浏览器开发模式（F12）中查找外部滚动条，并查看它属于哪个元素。如果它是另一个

元素，则只需将带有函数handleScroll的监听器添加到该元素即可。

- Amel