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 scrolling with arrow keys

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

1 个答案: