Question

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

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

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

Answer 1

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

如果捕获文档上的所有keydown事件，然后根据按下的键确定要采取的操作（使用which对象的event属性）并且可能还有其他一些情况（注意输入，控件检查等），您可以轻松滚动div。查看this fiddle以获得简单演示。

Answer 2

您可以在文档上按键或键入事件，并触发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所述，您可以使用scrollTop DOM属性滚动任何元素，享受。

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

2 个答案: