ScrollLeftは実行されません

Question

この例はscrollleftで実装されたhttp://jsfiddle.net/UwEe2/306/です。

変更しました。

は、これが私のスクリプトですが、実行されないされていますhttp://jsfiddle.net/njKXB/39/

問題は何ですか？

Answer 1

。

コード内のテキストをimg要素に置き換えるだけで機能することがわかります。

http://jsfiddle.net/njKXB/54/

それはラップだからあなたは、左/右1年代のリストをスクロールすることができない理由があります。高さを上げると、下に折り返して表示されます。ラッピングするので、左右にスクロールするものはありません。

http://jsfiddle.net/njKXB/55/

ソリューションはli年代にfloatを削除し、それらをすべて1つのラインに滞在する原因となるdisplay:inline;を追加することです。次に、容器に包装を防止するためにwhite-space: nowrap;を追加します。

http://jsfiddle.net/njKXB/75/

Answer 2

あなたのスクロール量が小さすぎて、動きに気づかれませんでした。

また、+=10pxにアニメートすると、jQueryは自動的にその値を現在の値に追加します。

var scroll = 100; 
var speed = 200; 

$('#left').click(function() { 
    $('#container').animate({ 
     'scrollLeft': '-=' + scroll 
    }, speed); 
}); 

$('#right').click(function() { 
    $('#container').animate({ 
     'scrollLeft': '+=' + scroll 
    }, speed); 
}); 

$('#up').click(function() { 
    $('#container').animate({ 
     'scrollTop': '-=' + scroll 
    }, speed); 
}); 

$('#down').click(function() { 
    $('#container').animate({ 
     'scrollTop': '+=' + scroll 
    }, speed); 
}); 

また、<img />タグを終了タグで閉じないでください。 <img />タグが自動閉鎖されている：

<img src="http://nyquil.org/uploads/IndianHeadTestPattern16x9.png" /> 

デモ：私はあなたが必要なulコンテナなしli要素内1年代のリストを置くことによって達成しようとしているもの見当がつかないhttp://jsfiddle.net/UwEe2/311/