className 元素上的事件侦听器，React Js

Question

朋友们怎么样，我在 div 中添加了一个事件处理程序，用于侦听用户是否滚动以隐藏导航栏。它工作正常，因为执行滚动功能的容器是主体，但如果我将 overflow: 滚动样式添加到包含我的部分的 div，eventHandler 将不再工作。如何将相同的代码添加到包含 .layoutContainer class 的 div？

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

我尝试执行 getElementByClassName 但它没有用。希望大家能帮帮我，谢谢

Answer 1

像这样？

// see 
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} ...

并且除非这个组件被添加，然后在 handleScroll 被删除，我几乎可以肯定你的效果应该基于一些依赖值来执行，而不仅仅是 componentDidMount

className 元素上的事件侦听器，React Js

Event listener on className element, React Js

javascript

css

event-handling

reactjs