ScrollLeft沒有運行

Question

我看過這個例子：http://jsfiddle.net/UwEe2/306/用scrollleft實現。

現在我已經做了修改。

這是我的腳本，但不運行：http://jsfiddle.net/njKXB/39/

問題是什麼？

Answer 1

我不知道你想通過把內部li元素1的列表沒有按規定ul容器要達到什麼。

只需用代碼中的img元素替換文本即可發現它的功能。

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

的原因，你無法滾動你的列表1的左/右是因爲它的包裝。如果你增加高度，你可以看到它下面包裹。由於它正在倒閉，所以沒有任何東西可以並排滾動。

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

的解決方案是在li的除去float並添加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" /> 

演示：http://jsfiddle.net/UwEe2/311/