Event listener on className element, React Js

Question

How about friends, I have an eventHandler added to a div that listens if the user scrolls to hide the navigation bar. It works fine since the container that performs the scroll function is the body, but if I add the overflow: scroll style to the div that contains my sections, the eventHandler doesn't work anymore. How can I add this same code to a div that contains the .layoutContainer class?

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    window.addEventListener("touchmove", handleScroll, {
      passive: true,
    });
  }, []);

I tried doing getElementByClassName but it didn´t works. Hope you can help me, thank you

Thomas · Accepted Answer · 2020-05-08 23:37:16Z

1

Like this?

// see https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
function getScrollContainer(node) {
  while (node) {
    if (node.scrollHeight > node.clientHeight) {
      return node;
    }
    node = node.parentNode;
  }
  return null;
}

// we want a reference to the current DOM node
const ref = React.useRef(null);

useEffect(() => {
  // determine what element is scrolling
  const container = getScrollContainer(ref.current);
  if(!container) return;

  // add the event listener
  container.addEventListener("scroll", handleScroll, { passive: true });
  container.addEventListener("touchmove", handleScroll, { passive: true });

  return () => {
    // and clean up after yourself
    container.removeEventListener("scroll", handleScroll);
    container.removeEventListener("touchmove", handleScroll);
  }
}, [/* sure that this doesn't rely on some dependency, like some `isVisible` state? */]);

// set the ref so we get access to the DOM node
return <div ref={ref} ...

And unless this component gets added, and later removed on handleScroll, I'm almost certain that your effect should be executed based on some dependent value, and not just on componentDidMount

edited May 8, 2020 at 23:37

answered May 8, 2020 at 23:31

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JDLR Over a year ago

Yeah thank you that works for sure i make it works and then saw your reply with this is the same way i did it, just need to use refs. Thank you so much

Thomas Over a year ago

@JoangelDeLaRosa, don't forget to remove the event listener.

Collectives™ on Stack Overflow

Event listener on className element, React Js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related