Question

我希望scrollLeft函数每次单击前进按钮时滚动div

代码：

 $("#nextbutton").click(
  function()
  {
   $("#thumbholder").scrollLeft(300);
 });

Thumbholder保存图像及其overflow:hidden，我想通过向左滚动来显示隐藏的项目。

#thumbholder 
{
height:30%;
width:90%;
overflow: hidden;
white-space:nowrap;
margin:2% auto; 
}

有人能告诉我如何在每次点击“#nextbutton”时重复scrollLeft功能，而不是仅仅是我第一次点击它吗？

Answer 1

问题是scrollLeft采用绝对滚动条位置，而不是相对位置。

请参阅the docs for scrollLeft。

尝试使用.scrollLeft()获取现有位置，从中减去300，然后使用您已使用的.scrollButton(value)函数将其应用回来：

http://jsfiddle.net/RjWKp/

$("#leftButton").click(
    function() {
        var thumbHolder = $("#thumbholder");
        thumbHolder.scrollLeft(thumbHolder.scrollLeft() - 300);
    }
);

Answer 2

使用$("#thumbholder")[0].scrollBy(-10, 0);，其中第一个参数是水平滚动的像素数（负值将向左滚动，正向滚动到右侧），第二个参数是要滚动的像素数垂直。您可以根据需要更改上述呼叫中的“10”

为什么scrollLeft函数仅在第一次单击时起作用？

2 个答案: