Question

I am having a difficult time trying to find my answer on my own, so maybe someone can help.

I have a horizontal scrolling div (wrapper) with mutliple divs (box) inside of it.

I want to be able to click the keyboard arrows keys to jump to the next element. The window would be scrolling left with each jump.

I’ve created a basic jsFiddle that people can add too to add keyboard navigation.

http://jsfiddle.net/ryanjay/JjhUN/

Answer 1

This can be accomplished by storing the positions of the boxes and then testing that against the window.scrollX position. You then animate to the closest box depending on the arrow key pressed.

var boxLefts = [];
$('.box').each(function(i, el){
    boxLefts.push(this.offsetLeft);
});

$(document).keydown(function(e) {
    var dir = false,
        targetLeft = -1;

    switch (e.keyCode) {
    case 37:
        dir = -1;
        break;                
    case 39:
        dir = 1;
        break;
    }

    if (dir) {
        e.preventDefault();
        winLeft = window.scrollX;
        $.each(boxLefts, function(i, v){
            if ((dir == 1 && winLeft < v && targetLeft < 0) ||
                (dir == -1 && winLeft > v)) {
                targetLeft = v;
            }
        });
        if (targetLeft >= 0) {
            $('html, body').animate({scrollLeft: targetLeft}, 1000);
        }
    }
});

See Demo