React Hooks - 滚动

Question

Case Closed

Apparently l added a fixed div where the content laid so the only scrollable thing was that div not the window. So handle scroll now is triggered successfully if i removed fixed from content div. Thanks

I have been using React in old way before React Hooks and l was able to create event listeners without any problem inside ComponentDidMount lifecycle hook and remove them safely in ComponentWillUnmount;

I tried the same inside useEffect Hook but apparently event listener ain't created and therefore handleScroll never called. Any idea on this?

import React, { useEffect, useState, useRef } from 'react';
import './Navbar.scss';

const Navbar = () => {

    const [scrollY, setScrollY] = useState(0);
    const Position = useRef(null);  

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
    }, []);

    const handleScroll = () => {
        console.log(Position);
    }

    return (
        <div className="row">
            <div className="col-lg-12 p-0">
                <div className="Navbar" ref={Position}>
                    <ul>
                        <li><a href="/us">KDN</a></li>
                        <li><a href="/">Posts</a></li>
                        <li><a href="/">Talk </a></li>
                        <li><a href="/jobs">Jobs</a></li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default Navbar;

Answer 1

An issue here is the scope that the initial addEventListener is working on. In regular JS you would always have the current value in the scope, however, in hooks, your code will reference stale values from previous renders. In your case, you are having the Position in initial state (null). What you need to do is actually to remove the dependency argument so that the event is being added on each render of the component or add a dependency on Position.current variable. So what you want is this:

useEffect(() => {
    window.addEventListener('scroll', handleScroll);

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

Plus in your handleScroll function you most likely want to console.log(Position.current)

Answer 2

Inorder for the event to be triggered, you need to render elements whose height is more than the viewport height. And for removing event listner using useEffect you have to return a function which will be triggered on unmount

for example

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

for further reference on useEffect hook please refer rect documentation

try this code

<div className="row">
  <div className="col-lg-12 p-0">
    <div className="Navbar" ref={Position} style={{ minHeight: "150vh" }}>
      <ul>
        <li>
          <a href="/us">KDN</a>
        </li>
        <li>
          <a href="/">Posts</a>
        </li>
        <li>
          <a href="/">Talk </a>
        </li>
        <li>
          <a href="/jobs">Jobs</a>
        </li>
      </ul>
    </div>
  </div>
</div>

you can also see the working demo in this sandbox