javascript - 使用 JS/jQuery 滚动 div 的溢出内容：滚动应用

Question

所以我有一个 div，里面有一堆比 div 更宽的内容。我已经设置overflow-x: scroll好了，一切都很好。但是我想在我的页面上有两个链接，允许用户左右滚动 div 内的内容（模仿标准滚动条箭头功能）。那可能吗？

Answer 1

使用 jQuery，可以像下面的例子一样处理滚动：

$(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/ （基本示例）
http://jsfiddle.net/jdNa9/3/ （有一点更新的CSS）

Answer 2

使用jQuery .scrollLeft()。例如，如果你想滚动 300 像素：

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