title: React: [useRef, scrollIntoView,] How to only autoscroll a specific div inside of an overflowing page?
body: <p>As you can see in my example</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  function App() {
    const items = ["this", "that", "those", "them", "these", "thisins"];
  
    const messagesRef = React.useRef(null);
    const scrollToBottom = () =&gt; {
      messagesRef.current.scrollIntoView({
        behavior: "smooth"
      });
    };
  
    React.useEffect(() =&gt; {
      if (messagesRef.current) {
        scrollToBottom();
      }
    }, [messagesRef]);
  
    return (
      // Page is overflowing, set height to mimic a full page
      &lt;div className="App" style={{ marginTop: 70, height: 800 }}&gt;
        {/* now set this div to overflow scroll with a small height */}
        &lt;div style={{ overflowY: "scroll", height: 200, border: "solid" }}&gt;
          {items.map(elem =&gt; (
            &lt;div style={{ border: "solid", borderColor: "green", padding: 20 }}&gt;
              {elem}
            &lt;/div&gt;
          ))}
          {/* Set last element within this div to be the ref to scroll to */}
          &lt;div ref={messagesRef} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The page loads, and both the page and the nested scrolling div auto scroll.</p>
  
  <p>What I'm trying to do is only <code>scrollIntoView</code> the overflowing div I have set as my ref.</p>
  
  <p>I'm targetting the ref, and it is working, but how do I NOT scroll the parent element as well?</p>