带有左右箭头键的水平滚动条

Question

I have searched through the questions, but couldn't find a solution for mine. If this question is a duplicate, i am sorry in advance :)

I already asked the theme creator for a solution, but he couldn't give me a fix.

My question is as following.

I am using a WordPress Theme called Contrast and now I have created a page like http://contrast.freevision.me/portfolio-page/horizontal-grid-with-scrollbar/

That page has a custom scrollbar and it is scrollable with the mouse and dragging also works. But how can i make it scroll with the left and right arrow keys?

Do i need to use the jQuery.animate function or is there a more simpeler solution?

This is the code i use for adding the right arrow key. I can see in the text 'right pressed' in console, but nothing happens. I tried different classes, but the animate won't trigger. How can i make the scrollbar move a little to the right everytime i press the right arrow?

jQuery(document).keydown(function(e){
if ((e.keyCode || e.which)  == 39)
{console.log('right pressed')}
{ 
jQuery("div#horizontalGridFolioContainer.horizontal-grid-folio-portfolio.div.div.div").animate({ left: "-=10px" })
}

});

Answer 1

I know I'm late but this can be helpful

let scroll_length = 40;
/*Scroll left right*/
$(document).on('keydown',function (e) {
    if (e.keyCode === 37) {
        element_scroller_wrapper.scrollLeft -= scroll_length;
        console.log('<--')
    }else if (e.keyCode === 39) {
        element_scroller_wrapper.scrollLeft += scroll_length;
        console.log('-->')
    }
});