ScrollLeft无法运行

时间:2012-02-04 17:49:43

标签: jquery css scroll

我见过这个例子:http://jsfiddle.net/UwEe2/306/是用scrollleft实现的。

现在我做了一个修改。

这是我的脚本但未运行:http://jsfiddle.net/njKXB/39/

有什么问题?

2 个答案:

答案 0 :(得分:1)

我不知道您要通过在1元素内添加li列表而不需要ul容器来实现的目标。

只需用代码中的img元素替换文本就可以证明它是有效的。

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

你无法滚动1左/右列表的原因是因为它正在包装。如果你增加高度,你可以看到它包裹在下面。因为它已经结束了,所以没有任何东西可以左右滚动。

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

解决方案是删除float上的li并添加display:inline;,这会使它们全部停留在一行中。然后将white-space: nowrap;添加到容器中以防止包装。

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

答案 1 :(得分:0)

您的滚动量太小,您无法注意到移动。

此外,您可以设置为+=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/