React中子元素onScroll事件不触发的解决方法咨询

问题描述 #

现有父元素和子元素，CSS样式如下：

.parent {
  height: 100vh;
}

父元素的onScroll事件可以正常触发，但给子元素添加onScroll事件后无法触发。移除父元素的height:100vh属性后，父元素的滚动事件也失效，给子元素添加同样的height属性也没用。希望无需修改父元素，直接让子元素触发滚动事件。

父组件代码 #

function App() {
  return (
        <BrowserRouter>
          <div className="app" onScroll={onScroll}> {/* 此事件可正常触发 */}
            {(menuToggled)?<Menu menuToggled={menuToggled} closesMenu={closesMenu}/>:null}
            <Nav handlesMenuBtn={handlesMenuBtn} />
              <Routes>
                  <Route path='/' element={<Home />}></Route>
                  <Route path='/about' element={<About/>}></Route>
                  <Route path='/contact' element={<Contact/>}></Route>
                  <Route path='/projects' element={<Projects/>}></Route>
              </Routes>
              <Footer />
          </div>
        </BrowserRouter>
      )
    }

子组件代码 #

function Projects() {
    useEffect(() => {
    })

    return (
        <div className="projects-menu" onScroll={()=>{console.log("working")}}> {/* 此事件无法触发 */}
            <div className="projects-menu-container">
                <div className="big-letters-container">
                    <p className='super-big-letters-about' style={{color: 'rgba(255, 164, 0, 0.5)'}}> PROJECTS</p>
                    <p className="big-letters" style={{zIndex: '1'}}>
                        PROJECTS
                    </p>
                </div>
                <div className="project-container">
                    <Project />
                </div>
            </div>
        </div>
    )
}

解决方案 #

要让子元素projects-menu独立触发scroll事件，必须满足两个核心条件：

• 给子元素设置固定高度/最大高度
• 开启溢出滚动控制

具体实现 #

1. 为子元素添加以下CSS样式：

.projects-menu {
  /* 可根据布局需求设置固定高度，比如占视口的80% */
  height: 80vh;
  /* 或者设置最大高度，避免内容过少时占用过多空间 */
  /* max-height: 700px; */
  /* 开启垂直方向的溢出滚动，内容超出时生成滚动条 */
  overflow-y: auto;
  /* 可选：隐藏水平方向的滚动条（如果不需要） */
  overflow-x: hidden;
}

2. 确保子元素内部的内容高度超过自身设置的高度，只有这样才会出现滚动条，进而触发scroll事件。如果内容高度不足，scroll事件自然不会被触发。

原因说明 #

• 父元素设置height:100vh后，页面的滚动行为被父元素接管，子元素默认会跟随父元素滚动，不会产生独立的滚动区域。
• 之前单独给子元素设置height但未配置overflow-y: auto时，子元素内容会溢出但不会生成滚动条，因此无法触发自身的scroll事件。

内容的提问来源于stack exchange，提问作者user17833823