Пересылка событий прокрутки клавиатуры от одного элемента к другому при нажатии мыши

Question

Я работаю над приложением, которое имеет боковую панель и основной вид временной шкалы. Пользователи должны иметь возможность выбрать элемент на боковой панели и перетащить его в представление временной шкалы.

Чтобы перетащить элемент, пользователь нажимает и удерживает левую кнопку мыши вниз и перетаскивает элемент на временную шкалу. Посмотреть. Теперь пользователь должен иметь возможность использовать клавиши со стрелками для прокрутки временной шкалы вверх и вниз, однако при нажатии этих кнопок вместо этого прокручивается боковая панель. В mousedown я пытался установить фокус на элементе временной шкалы, но это не работает.

onMouseDown = () => {
  ...
  document.getElementById('timeLine').focus() // does not change the focus to the timeline
}

Можно ли заставить браузер менять фокус, пока кнопка мыши удерживается нажатой? Мое текущее исправление состоит в том, чтобы заставить анимацию прокручивать представление временной шкалы, используя jQuery, но это приводит к довольно медленной анимации по сравнению с настоящим событием прокрутки браузера.

Answer 1

Только определенные HTML элементы могут быть сфокусированы, такие как не отключенные входы, iFrames, не отключенные кнопки и якоря (ссылки), которые имеют свойство href.

Чтобы другие элементы могли быть сфокусированным, вы должны дать им индекс табуляции. Чтобы браузер автоматически вычислял правильный tabindex, вы должны использовать tabindex = 0 в вашем html для элемента временной шкалы. Это должно исправить вашу проблему.

Пример быстрого соединения здесь. Если вы удалите tabindex = 0, то заметите, что команда фокусировки jQuery перестает работать https://codepen.io/kaisalmon/pen/BaNVmbL

РЕДАКТИРОВАТЬ: если вы используете mousedown (но не click или mouseup также предотвращает действие по умолчанию для события, используя:

    $('#timeline').focus();
    e.preventDefault();

Answer 2

Сначала необходимо проверить, отображается ли содержимое на экране или не используется функция onScroll () или любой другой источник. После этого вам нужно добавить активный класс на эту вкладку или выделить ту вкладку, содержимое которой отображается на экране.

Чтобы найти погоду, содержимое отображается на экране или нет, чтобы сосредоточиться на конкретном элементе из временной шкалы, перейдите по ссылке на получить содержимое появляется при прокрутке Как проверить, виден ли элемент после прокрутки?