使滚动键滚动正确的页面元素答案

【问题标题】：Making the scrolling keys scroll the proper page element使滚动键滚动正确的页面元素
【发布时间】：2015-06-22 09:44:06
【问题描述】：

我的页面中有一个可滚动的 DIV，而页面上没有其他元素。（页面布局由 DIV 本身上方和下方的控件固定。）我希望在所有情况下都可以使用箭头键和向上翻页/向下翻页来滚动 DIV，但除非 DIV 实际上具有焦点，否则我似乎无法这样做.其他 DIV 中还有其他输入字段通常具有焦点。我尝试在文档级别捕获箭头键和 page/up down 'keydown' 事件，并直接将相同的事件（using answers from this question）模拟到需要滚动的 DIV，但不会发生滚动。我知道事件正在被调度，因为如果我附加一个事件处理程序我会看到它，但由于某种原因它不会导致任何滚动。我也试过设置DIV的“tabIndex”属性没有区别。

如何指定特定元素来接收这样的特定键？当这些键仅对页面上的单个元素有意义时，要求将特定元素集中在某些键上工作是非常不友好的。必须不断地将焦点从另一个元素切换到可滚动区域以滚动并返回以输入数据是不可接受的。

我看到了可以通过其他方式模拟滚动的建议，但我想避免这条路线，因为这并不总是产生相同的结果，而且我还想将它推广到除滚动之外的其他类型的关键事件和动作.

【问题讨论】：

标签： javascript scroll dom-events keyboard-events

【解决方案1】：

您可以通过调整其scrollTop DOM 属性来滚动任何元素。

如果您捕获文档上的所有keydown 事件，然后根据按下的键（使用event 对象的which 属性）以及其他一些情况（输入集中，控件检查等）您可以轻松滚动您的div。查看this fiddle 以获得简单的演示。

【讨论】：

【解决方案2】：

您可以在文档上按 keypress 或 keyDown 事件并在您的 DIV 上触发操作。

$(document).ready(function(){


$(document).on("keydown", handleKeyDown);

 function handleKeyDown(evt) {

var code = parseInt(evt.keyCode); // the key Code of the key which was pressed during the event /and parses it and returns a 'integer'.


    if(code == 38){ // 38 is the keycode for UP key on the keyboard
    alert("up");
    } else if(code == 40) // 40 is the keycode for down key on the keyboard.
    alert("down");
    }
    }
  });

正如 Tadeáš Peták 在 breif 中解释的那样，您可以使用 scrollTop DOM 属性来滚动任何元素，尽情享受吧。

【讨论】：