Move scrollbar position by x number of pixels

Question

I have a fixed width div. i will denote this as x

I have a fixed div size height.

I want to add buttons on either side of the div so that the user can move to the right, i.e. move x the number of pixels to the right, i.e. show next entry in div.

Can anyone suggest a solution to this problem?

Here is my current html / css:

<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;"> <div class="inner_container" style="width: 10000px;"> <table> <tr> <td style=" width: 577px; "> <div style="text-align:left; margin: 0px 10px 10px 10px; width:557px; "> <p>Add Comment to the Tesco Catalogue</p> <form class="comment_form" action="profile" method="post"> <textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea> <input type="submit" value="Submit"/> </form> </div> </td> <!-- do a for loop here to generate all other items --> <td style="width:577px;"> <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;"> <p class="comment_username"> User said at such a time</p> <p class="comment_comment"> Comment ......</p> </div> </td> <td style="width:577px;"> <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;"> <p class="comment_username"> User said at such a time</p> <p class="comment_comment"> Comment ......</p> </div> </td> </tr> </table> </div> </div> 

Here is jsfiddle

So, I want to add two buttons on either side of the div, both of which move x pixels to the left or right, obviously the left button on the left, for example. previous comment, right button on the right, next comment.

So, in the html created, I want the scroll bar to move left or right 577px at a time, depending on the user's click.

Let me know what you guys think!

Answer 1

You can use scrollLeft() to get the current scroll position. Then use the jQuery animate function to smoothly scroll the container left / right. For this, I added two buttons with identifiers on the left / right. The only difference between the functions is that you add a distance of 200, while the other subtracts 200. Replace 200 for any required scroll amount. For bonus points, you can find the left position in the next comment section on the div container and calculate the cost of two hundred on the fly.

http://jsfiddle.net/EB4UC/70/

 $('#left').click(function () { var leftPos = $('div.outer_container').scrollLeft(); console.log(leftPos); $("div.outer_container").animate({ scrollLeft: leftPos - 200 }, 800); }); $('#right').click(function () { var leftPos = $('div.outer_container').scrollLeft(); console.log(leftPos); $("div.outer_container").animate({ scrollLeft: leftPos + 200 }, 800); }); 

Answer 2

you are looking for,

 $('.outer_container').scrollLeft(3); $('.outer_container').scrollTop(16); 

so when you add a button, the code will be

 $('#buttonid').click(function(){ $('.outer_container').scrollLeft(5); }) 

so that the user clicks so many times and watch what happens

 $('#button_id').click(function(){ var scroll = $('.outer_container').scrollLeft(); console.log(scroll); $('.outer_container').scrollLeft(5+scroll); })