So I have a div, with a bunch of content inside it that is wider than the div. I have set overflow-x: scroll and all is well. However I'd like to have two links on my page that allow the user to scroll the content within the div left and right (mimicking the standard scrollbar arrow functionality). Is that possible?

So I have a div, with a bunch of content inside it that is wider than the div. I have set overflow-x: scroll and all is well. However I'd like to have two links on my page that allow the user to scroll the content within the div left and right (mimicking the standard scrollbar arrow functionality). Is that possible?

• javascript
• jquery
• scroll
• overflow

• I mean two links that make the content scroll left/right when clicked. – Kev Commented Aug 3, 2013 at 8:09

2 Answers 2

With jQuery the scrolling can be handled like in this example:

$(function(){
    var iv;
    var div = $('#content');
    $('#left').mousedown(function(){
        iv = setInterval(function(){
            div.scrollLeft( div.scrollLeft() - 4);
        },20);
    });
    $('#right').mousedown(function(){
        iv = setInterval(function(){
            div.scrollLeft( div.scrollLeft() + 4);
        },20);
    });
    $('#left,#right').on('mouseup mouseleave', function(){
        clearInterval(iv);
    });
});

JSFiddle:
http://jsfiddle/jdNa9/1/ (basic example)
http://jsfiddle/jdNa9/3/ (with a bit updated CSS)

Use jQuery .scrollLeft(). For example if you want to scroll 300 pixels:

$("a.your_link").click(function(){
  $("#your_container").scrollLeft(300);
});