title: Scrolling a div directly
body: <p>I need to find a way to ensure that every time I press up or down, my div called question_text scrolls up or down (If it's visible).</p>
  <p>The issue is that throughout my code, I temporarily replace this div with a loading animation, and when the visibility is reset it seems to take the focus off question_text.</p>
  <p>I've attempted to use autofocus to keep it in focus, but changing the visibility seems to get in the way.</p>
  <pre><code>&lt;div id=&quot;question_text&quot; class=&quot;question-text&quot; onblur=&quot;this.focus()&quot; autofocus=&quot;true&quot;&gt;
  </code></pre>
  <p>I've also used the below code to refocus it when the element is visible again, but the code doesn't seem to do anything despite there being no errors.</p>
  <pre><code>var element = document.querySelector('.question-text');
  if (window.IntersectionObserver) {
    var observer = new IntersectionObserver(function(entries) {
      if (entries[0].intersectionRatio) {
        question_text.focus()
      }
    }, {
      root: document.body
    });
    observer.observe(element);
  }
  </code></pre>
  <p>Is there someway to simply scroll the div directly whenever pressing up or down? 100% of the time those keys are pressed, that div needs to be scrolled.</p>
  <p>I would really like to find a way to bypass the focus issues I'm having, but can't find any example of a way to do this.</p>