使用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)