2015-04-16 55 views
4

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

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

我已经看到了可以用其他方法模拟滚动的建议,但是我想避开那条路线,因为这并不总是产生相同的结果,而且我还想将它推广到其他类型的关键事件和行为滚动。

回答

6

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

如果捕获所有文件上的​​事件,然后你要取决于按下的键(使用event对象的which属性),也许一些其他情况(输入集中采取什么样的行动作出决定,控制检查等),你可以很容易地滚动你的div。查看this fiddle进行简单演示。

0

您可以在文档上按下按键或按键事件并在您的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属性滚动的任何元素,享受。