Javascript React 事件处理程序未能在 onScroll 事件中触发

发布于09月07日

我正在试着听卷轴活动. 以下是我转换的原始代码.

document.addEventListener("scroll", function(){
const headerChange = document.querySelector("header");
if (window.scrollY > 0) {
headerChange.classList.add("scrolled");
} 
else {
headerChange.classList.remove("scrolled");
} 
})

虽然这是我在我的react 代码中转换它的方式.

const [isScrolling, setIsScrolling] = useState(false);
    const navRef = useRef();


    const navScroll = () => {

        setIsScrolling(window.scrollY > 0 ? 
        navRef.current.classList.add("scrolled") 
        :  navRef.current.classList.remove("scrolled"));
        console.log(navScroll)
    }

return (
<nav
    ref={navRef} 
    onScroll={() => isScrolling}>

</nav>

)

滚动页面时未能触发Scroll事件

请问，滚动功能未能触发的原因可能是什么？

推荐答案

你需要听页面滚动，而不是nav滚动，所以你仍然需要使用document.addEventListener('scroll', handleScroll);.侦听DOM事件是一个副作用，应该由useEffect来处理.当事件被激发时，你应该更新状态，状态的改变应该改变className-className={isScrolling ? 'scrolled' : ''.

const Header = () => {
  const [isScrolling, setIsScrolling] = useState(false);
  
  useEffect(() => {
    const handleScroll = () => setIsScrolling(window.scrollY > 0);
    
    document.addEventListener('scroll', handleScroll);
    
    return () => { // cleanup
      document.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <nav className={isScrolling ? 'scrolled' : ''}>
    ...
    </nav>
  )
}