Use JS/jQuery to scroll a div's content that has overflow: scroll applied

问题

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?

回答1:

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.net/jdNa9/1/ (basic example)
http://jsfiddle.net/jdNa9/3/ (with a bit updated CSS)

回答2:

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

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

来源：https://stackoverflow.com/questions/18030571/use-js-jquery-to-scroll-a-divs-content-that-has-overflow-scroll-applied