Add event scroll for container element

Question

I have this code for set scroll event to window and my container, but I think it is not good to use document in react component

   const closeMenu = () => {
        setIsActionListVisible(false);
    };

useEffect(() => {
        window.addEventListener("scroll", closeMenu);
        const layout = document.getElementsByClassName("common-home-layout");
        if (layout) {
            layout[0].addEventListener("scroll", closeMenu);
        }
    }, []);

Maybe do you have any better case for that?

Why would you use getElementsByClassName instead of querySelector? — Konrad
– Konrad, Commented Oct 16, 2022 at 13:23
Does this answer your question? How to add event listener to a ref? — Kaneki21
– Kaneki21, Commented Oct 16, 2022 at 13:33

Mohammed Ahmed · Accepted Answer · 2022-10-16 13:29:09Z

1

You can use useRef instead of document

const layoutRef = useRef();
if (layoutRef && layoutRef.current) {
  listRef.current.addEventListener(...)

  return () => {
    layoutRef.current.removeEventListener(...)
  }
}

answered Oct 16, 2022 at 13:29

Mohammed Ahmed

4352 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Add event scroll for container element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related