title: addEventListener('scroll') to scrollable <div /> using useRef - React
body: <p>This is one of the first times I am actually using React Hooks properly in a project so bear with me if I am not quite there.</p>
  
  <p>In the component below, my aim is to display the <code>&lt;HelperTooltip&gt;</code> on load and when the scrolling div (not the window) scrolls I want to hide after it scrolls X amount of pixels.</p>
  
  <p>My thought process is to create a useRef object on the scrolling <code>&lt;div/&gt;</code> element, which then I can add an event listens with a callback function which then can toggle the state to hide the <code>&lt;HelperTooltip&gt;</code></p>
  
  <p>I have created a Codesandbox below to try and demonstrate what I am trying to do. As you can see in the demo the <code>node.addEventListener('click')</code> is working fine, however when I try and call the <code>node.addEventListener('scroll')</code> it is not firing. </p>
  
  <p>I'm not sure if I taking the wrong approach or not, any help will greatly be appreciated. In the codesandbox demo it is the react image that I trying to hide on scroll, not the <code>&lt;HelperTooltip&gt;</code></p>
  
  <p>CodeSandbox link: <a href="https://codesandbox.io/s/zxj322ln24" rel="noreferrer">https://codesandbox.io/s/zxj322ln24</a></p>
  
  <pre><code>import React, { useRef, useCallback, useState } from "react";
  import ReactDOM from "react-dom";
  
  import "./styles.css";
  
  const App = props =&gt; {
    const [isLogoActive, toggleLogo] = useState(true);
  
    const scrollElementRef = useCallback(node =&gt; {
      node.addEventListener("click", event =&gt; {
        console.log("clicked", event);
      });
  
      /* 
        I want to add the scroll event listener 
        here and the set the state isLogoActive to 
        false like the event listener above but the 'scroll' event
        is firing --- see below on line 21
      */
  
      // node.addEventListener("scroll", event =&gt; {
      //   console.log("scrolled", event);
      //   toggle log
      // });
    });
  
    return (
      &lt;div className="scrolling-container"&gt;
        &lt;div ref={scrollElementRef} className="scrolling-element"&gt;
          &lt;p&gt;top&lt;/p&gt;
  
          {isLogoActive &amp;&amp; (
            &lt;div className="element-to-hide-after-scroll"&gt;
              &lt;img
                style={{ width: "100px", height: "100px" }}
                src="https://arcweb.co/wp-content/uploads/2016/10/react-logo-1000-transparent-768x768.png"
              /&gt;
            &lt;/div&gt;
          )}
  
          &lt;p&gt;bottom&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("app"));
  </code></pre>