Question

I want the scrollLeft function to scroll a div each time when I click a forward button

Code:

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

Thumbholder holds the images and its overflow:hidden, I want to show the hidden items by scrolling to the left.

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

Can anyone tell me how to repeat the scrollLeft function for each click on “#nextbutton”, instead of just the first time I click it?

Answer 1

The problem is that scrollLeft takes an absolute scrollbar position, not a relative one.

See the docs for scrollLeft.

Try using .scrollLeft() to get the existing position, subtract 300 from it, and apply it back using the .scrollButton(value) function you’re already using:

http://jsfiddle.net/RjWKp/

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