javascript - 如何使用 JavaScript 来选择应按向上/向下键滚动的对象？

Question

在大多数浏览器中，当您将鼠标悬停在某个对象上并使用鼠标滚动时，鼠标指针下方的对象将会滚动。如果您单击一个对象并按向上和向下箭头(或 PgUp/PgDn)，则您最后单击的对象将是滚动的对象。

我想使用 JavaScript 来选择哪个对象将在向上/向下箭头上滚动。明显的解决方案是使用 JS click() 元素，但这似乎对滚动没有任何影响。我还尝试设置对象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/

p.s.:我可以使用 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