Using arrow keys to navigate grid of divs wount scroll overflown contents

Question

Here's a solution i found on stackoverflow this solution works for me except that when the contents of the div is overflown the contents do not scroll alongside the arrow keys, like scroll seems to be much slower after the 5 or 6 rows.

Please here's an updated jsFiddle of the answer above

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');
}

score 0 · Answer 1 · edited May 23 '17 at 12:21

If I understand this, your issue is that when scrolling with arrow-keys on your keyboard, your "selected character" inside the calender moves faster than the actual scroll bar...

This is because you are both moving the "selected" object AND scrolling with your keys. Moving the "selected" object within the calender is going on simultaneously to the regular scrolling. So two behaviors are going on at the same time, independent of each other, each triggered by the arrow key.

One solution would be to add a JS behavior to add extra scrolling with arrow-key usage... but then if the user uses their mouse to scroll in the window, things will be "off" again.

You can check out this post, it might help: JScrollPane scrolling with arrow keys

Using arrow keys to navigate grid of divs wount scroll overflown contents

1 Answers1