Search code examples
jqueryscrollbarjscrollpane

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

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...

Solution

  • 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