CODEWITHSUNDEEP
javascript
CrystalGarnet
CrystalGarnet

Reputation: 119

Scrolling a div directly

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).

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.

I've attempted to use autofocus to keep it in focus, but changing the visibility seems to get in the way.

<div id="question_text" class="question-text" onblur="this.focus()" autofocus="true">

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.

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);
}

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.

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.

Upvotes: 1

Views: 42

Answers (1)

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

You are calling it element and then trying to focus it using question_text.

Make these changes:

// changed this var to question_text
var element = document.querySelector('.question-text');
var question_text = document.getElementById('#question-text');
if (window.IntersectionObserver) {
  var observer = new IntersectionObserver(function(entries) {
    if (entries[0].intersectionRatio) {
      question_text.focus();
    }
  }, {
    root: document.body;
  });
  observer.observe(element);
}

Upvotes: 1

Related Questions