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

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

2 个答案: