Узнайте, какой элемент прокрутки имеет фокус клавиатуры

Question

При наличии нескольких элементов с полосой прокрутки на одной странице (возможно, путем установки CSS overflow-scroll) клавиши со стрелками на клавиатуре всегда прокручивают только одну область (что хорошо). Кажется, что всегда последний элемент с полосами прокрутки, по которым я щелкал мышью, распознает ключевые события и прокрутку ( пример на Codepen ).

Есть ли способ узнать, какой элемент (элемент div в приведенном выше примере) имеет «фокус» клавиатуры (заключенный в кавычки, поскольку кажется, что псевдокласс не фокусируется, см. Пример выше)?

Answer 1

Вы можете добавить tabindex="0" к делению.

https://codepen.io/gezzasa/pen/QrOdqX

Answer 2

Вы можете добавить tabindex к вашим внешним или элементам прокрутки и затем использовать document.activeElement

window.addEventListener('keydown', e => {
  let a = document.activeElement;
  console.log(a);
})

.container {
  display: flex;
}
.outer-left {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

.inner-left {
  height: 500px;
  background-color: red;
}

.outer-right {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

.inner-right {
  height: 500px;
  background-color: blue;
}

<div class="container">
  <div class="outer-left" tabindex="1">
    <div class="inner-left">
    </div>
  </div>
  <div class="outer-right" tabindex="2">
    <div class="inner-right">
    </div>
  </div>
</div>