javascript - JS/jQuery を使用して、オーバーフローのある div のコンテンツをスクロールします: スクロールが適用されます

Question

だから私はdivよりも広いコンテンツの束を含むdivを持っています。設定overflow-x: scrollしましたが、すべて問題ありません。ただし、ユーザーがdiv内のコンテンツを左右にスクロールできるようにする2つのリンクをページに配置したいと思います(標準のスクロールバーの矢印機能を模倣しています)。それは可能ですか？

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