title: selected element move up and down, but scroll behavior is not working with
body: <p>I make a list of div tags for listing filename.
  and After selecting a div, then I can change focus up and down using Arrow keys</p>
  <p>Because I have a long file list, I add <code>overflow: scroll</code> to the container
  but Scroll does not move along with my focus(so active div disappear from the viewport),
  How can I make scroll behavior move down along with active div?</p>
  <p>I create an example in <a href="https://codesandbox.io/s/scroll-is-not-moving-with-div-pi640?file=/src/styles.css" rel="nofollow noreferrer">codesandbox</a></p>
  <pre class="lang-js prettyprint-override"><code>import &quot;./styles.css&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  
  export default function App() {
    const [selectedItem, setSelectedItem] = useState(0);
  
    useEffect(() =&gt; {
      const keyPress = (e) =&gt; {
        if (e.key === &quot;ArrowLeft&quot;) {
          setSelectedItem((prev) =&gt; Number(prev) - 1);
        }
        if (e.key === &quot;ArrowRight&quot;) {
          setSelectedItem((prev) =&gt; Number(prev) + 1);
        }
      };
      window.addEventListener(&quot;keydown&quot;, keyPress);
      return () =&gt; {
        window.removeEventListener(&quot;keydown&quot;, keyPress);
      };
    }, [selectedItem]);
  
    const onClickDiv = (e) =&gt; {
      setSelectedItem(e.target.id);
    };
  
    const renderList = () =&gt; {
      let items = [];
      console.log(selectedItem);
      for (let i = 0; i &lt; 60; i++) {
        items.push(
          &lt;div
            key={i}
            className={`item ${Number(selectedItem) === i ? &quot;active&quot; : &quot;&quot;}`}
            id={i}
            onClick={onClickDiv}
          &gt;
            Item{i}.png
          &lt;/div&gt;
        );
      }
      return items;
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;list-container&quot;&gt;{renderList()}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.list-container {
    height: 300px;
    overflow: scroll;
  }
  
  .active {
    background-color: orangered;
  }
  </code></pre>
  <h2>------------------ EDIT -----------------------</h2>
  <p>I finally complete this example, I sincerely thank you guys for answering my question.</p>
  <p>Here is <a href="https://codesandbox.io/s/moving-scorll-in-the-viewport-83j40?file=/src/App.js" rel="nofollow noreferrer">code sandbox final code</a></p>