Как я могу использовать JavaScript для выбора того, какой объект следует прокручивать по клавишам вверх/вниз?

Question

В большинстве браузеров, когда вы наведите указатель мыши на объект и прокрутите мышью, объект под указателем мыши будет прокручиваться. Если вы нажмете объект и нажимаете стрелки вверх и вниз (или PgUp/PgDn), объект, который вы нажали последним, будет прокруткой.

Я хочу использовать JavaScript для выбора того, какой объект будет прокручиваться стрелками вверх/вниз. Очевидным решением было бы щелкнуть() элемент с JS, но это, похоже, не влияет на прокрутку. Я также пытался установить объекты scrollTop/scrollLeft, но это не влияет на то, какой объект будет прокручиваться дальше. Любые идеи, как я могу достичь этого (в основном так же, как если бы пользователь нажал на объект)?

Я ищу что-то вроде этого:

<div> 
    <div id="redbox">Foo</div> 
</div> 
<div> 
    <div id="greenbox">Bar</div> 
</div> 

<button onclick="select('redbox');">Scroll redbox from now on</button> 
<button onclick="select('greenbox');">Scroll greenbox from now on</button> 

<script> 
    function select (id) { 
     /* Scroll element with 'id' when user presses up/down arrows next time */ 
     document.getElementById(id).click() /* doesn't work */ 
    } 
</script> 

JSFiddle: https://jsfiddle.net/tv0bpz7r/

пс: Я могу использовать JS, чтобы отслеживать, какой объект должен быть скроллинг, а затем поймать стрелка вверх/вниз прессы и прокрутите объект, который я хочу прокрутить. Это работает, но кажется излишне хакерским, и оно также перезаписывает настройки прокрутки пользователя, так как я должен решить, сколько прокрутки.

Answer 1

Просто измените эти две линии

<div class="left container"><div class="long" tabindex="0" id="redbox">Foo</div></div> 
<div class="right container"><div class="long" tabindex="0" id="greenbox">Bar</div></div> 

Добавлено TabIndex = "0" к каждому из них

Js

function select(id) { 
    document.getElementById(id).focus(); 
} 

Он будет работать

Демо: https://jsbin.com/sirunem/25/edit?html,js,output

Answer 2

document.getElementById(id).focus() /* should work */ 

Однако ваш код несовершенна (ReferenceError: select is not defined) ... Я до сих пор не понимаю, почему ... :-(