Question

我的页面上有一个div，可以在overflow-y上向上/向下滚动。目前，可以使用向上/向下箭头键以及鼠标滚轮向上和向下滚动。如何添加使用'j'键向上滚动并向上滚动'k'键的功能？我不知道该怎么做（并且似乎找不到任何文档）的部分是如何在捕获'j'和'k'按键事件后告诉div滚动。这是我到目前为止所做的：

$('#my-div').keydown(function(e) {
    if (e.keycode === 74) {
        // how to scroll down?
        console.log('j!');
    }
    else if (e.keycode === 75) {
        // how to scroll up?
        console.log('k!');
    }
}

Answer 1

这是一个小提示：http://jsfiddle.net/BmY6w/

要让#my-div回复keydown个事件，该元素需要关注。您可以通过使用$(document)来解决这个问题并以这种方式绑定keydown - 但是，我已经添加了一个tabindex（对小提琴），允许您单击它然后使用键盘＆＃39; s J / K键。

$('#my-div').keydown(function(e) {
    if (e.keycode === 74) {
        $(this)[0].scrollTop += 20;
    }
    else if (e.keycode === 75) {
        // how to scroll up?
        $(this)[0].scrollTop -= 20;
    }
}

如您所见，更改scrollTop偏移量是最简单的。

您可以像animate这样$(this).animate({scrollTop: cur - 30}, 200);获得幻想：speed

更新了动画小说：http://jsfiddle.net/BmY6w/1/

修改1：

使用动画小提琴，按住j或k按钮时可能会注意到一些奇怪之处。这是由于排队的事件。这是一个更新的小提琴，包括基本限制：

http://jsfiddle.net/BmY6w/2/

编辑2：

恒速并不总是很有趣。让我们加一些加速！这是一个基本加速的小提琴示例（也清理了脚本）：

http://jsfiddle.net/BmY6w/3/

值accelerator和{{1}}可让您在按住j / k按钮时微调加速度和动作。

jQuery / Javascript - 用'j'和'k'键滚动？

1 个答案: