使用箭头键导航div网格将滚动溢出的内容

Question

这是我在stackoverflow上发现的一个解决方案，该解决方案对我有用，除了当div的内容溢出时，内容不会沿着箭头键滚动，例如滚动5或6行后，滚动似乎慢得多。

请这里是上面答案的更新的jsFiddle

var position = { x: 0, y: 0 };
var calendarMap = [];

$(document).ready(function () {
    $('.row').each(function () {
        calendarMap.push([]);
        $('.day, .date', this).each(function () {
            calendarMap[calendarMap.length - 1].push($(this));
        });
    });
    highlightCell();
});

$(window).on('keydown', function (e) {
    if (e.keyCode === 37) // left
        moveLeft();
    else if (e.keyCode === 38) // up
        moveUp();
    else if (e.keyCode === 39) // right
        moveRight();
    else if (e.keyCode === 40) // down
        moveDown();
    highlightCell();
});

function moveLeft() {
    position.x--;
    if (position.x < 0)
        position.x = 0;
}

function moveUp() {
    position.y--;
    if (position.y < 0)
        position.y = 0;
}

function moveRight() {
    position.x++;
    if (position.x >= calendarMap[0].length)
        position.x = calendarMap[0].length - 1;
}

function moveDown() {
    position.y++;
    if (position.y >= calendarMap.length)
        position.y = calendarMap.length - 1;
}

function highlightCell() {
    $('.day, .date').removeClass('selected');
    calendarMap[position.y][position.x].addClass('selected');
}

Answer 1

如果我理解这一点，那么您的问题是，在键盘上使用箭头键滚动时，日历中的“选定字符”移动的速度比实际滚动条要快。

这是因为您既要移动“选定的”对象，又要用键滚动。 在压延机内移动“选定”对象与常规滚动同时进行。 因此，两种行为是同时进行的，彼此独立，由箭头键触发。

一种解决方案是添加JS行为以使用箭头键添加额外的滚动...但是如果用户使用鼠标在窗口中滚动，情况将再次“关闭”。

您可以查看这篇文章，它可能会有所帮助： JScrollPane使用箭头键滚动