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

Share Improve this question Follow asked Aug 3, 2013 at 7:45 KevKev 41522 gold badges88 silver badges1717 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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