Jscrollpane: Is the function scroll 200px possible with horizontal scrollbar?

Question

I tried doing it like in the vertical example but could not get that to work.

So what I have is a div with a horizontal scrollbar in it with a lot of pictures in it. I now want to make a button that if clicked will scroll +200px or something like that. Is this possible and where do I start? Couldn't find anything on google or here...

Answer 1

Which version are you using? According to the documentation this did not exist but has been fixed in the latest version, which came out a few months ago...

see http://code.google.com/p/jscrollpane/issues/detail?id=8

If this doesn't work for you, there is another plugin http://plugins.jquery.com/project/jscrollhorizontalpane that may do the job for you.

Answer 2

It sounds like you are looking for the scrollBy functionality of jScrollPane 2:

http://jscrollpane.kelvinluck.com/scroll_to.html

Since you only want to scroll horizontally you will use the scrollByX function like so:

$(function()
{
    var scrollPane = $('.scroll-pane').jScrollPane();
    var api = scrollPane.data('jsp');
    $('#your-button-id').bind(
        'click',
        function()
        {
            api.scrollByX(200);
        }
    );
}

Additionally, you mention that your scrollpane contains lots of images. If this is the case you will need to ensure that the scrollpane can correctly calculate it's width by using one of the following two techniques:

http://jscrollpane.kelvinluck.com/image2.html

http://jscrollpane.kelvinluck.com/image.html