时间戳

首页 > 解决方案 > 如何在当前组件中使用 handleScroll？

reactjs - 如何在当前组件中使用 handleScroll？

问题描述

我想为我的组件设置handleScroll事件，但是我当前的代码是在我移动浏览器窗口的滚动时触发的，我希望在我移动组件的滚动时触发它，我该怎么办？

import classNames from 'classnames'
import { useEffect, useState } from 'react'

const Header = _ => {
  const [ scrolled, setScrolled ] = useState()
  const classes = classNames('header', {
    scrolled: scrolled,
  })
  useEffect(_ => {
    const handleScroll = _ => { 
      console.log(11111)
    }
    window.addEventListener('scroll', handleScroll)
    return _ => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])
  return (
    <TableBody>
            {lis.map((l, i) => (
              <Rows
                key={i}
              />
            ))}
          </TableBody>
  )
}
export default Header

标签： reactjsscroll

解决方案

您正在窗口而不是组件上添加滚动侦听器事件。

您可以使用 React 的onScroll事件而不是addEventListener手动附加到您的 Header 元素。

...
const handleScroll = _ => { 
    console.log(11111)
}

return (
    <div onScroll={handleScroll}>
        <TableBody>
            {lis.map((l, i) => (
              <Rows
                key={i}
              />
            ))}
          </TableBody>
    </div>
);
...

确保您的组件是可滚动的。

推荐阅读