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