Assigning scrollByX and scrollByY to jspDrag in jScrollPane?

I am implementing jScrollPane for a project that involves horizontal scrolling. The clien开发者_如何学Got wants the horizontal scrolling to take place in increments, so that the user can basically jump from slide to slide.

I can do this on the arrows using jScrollPane's API and "scrollByX". However, the problem lies with the scrollbar that the user can click on and drag back and forth and scroll the content that way.

Is there any way to assign "scrollByX" (or "scrollByY", for that matter) to jspDrag so that when the user drags the scrollbar, the scrolling isn't continuous, but in increments as well?

Thanks in advance.

You can listen to the mouseup event after any jsp-scroll-x event and in that you can figure out where the nearest item is and use the jScrollPane API to scroll to the position of that element. I've updated the example you found so that it works in this manner (as you noticed it previously only scrolled forwards):

http://www.jsfiddle.net/dzvSC/14/

(obviously this code is working vertically but you can change the y's to x's and the top's to left's etc)

var api = $('.scroll-pane').jScrollPane().bind(
    'jsp-scroll-y',
    function(event, scrollPositionY, isAtBottom, isAtTop)
    {
        $(document)
            .unbind('mouseup.jsp-demo')
            .bind(
                'mouseup.jsp-demo',
                function()
                {
                    $(document).unbind('mouseup.jsp-demo');
                    var currentY = api.getContentPositionY(),
                        lastY = 0;
                    api.getContentPane().find('>*').each(
                        function()
                        {
                            var thisY = $(this).position().top,
                                destY;
                            if (thisY > currentY) {
                                destY = currentY - lastY > thisY - currentY ? thisY : lastY;
                                api.scrollToY(destY, true);
                                return false;
                            }
                            lastY = thisY;
                        }
                    );
                }
            );
    }
).data('jsp');

Original answer:

It is possible to do what you want and I wrote an example somewhere. You may be able to track it down on the jScrollPane mailing list - in the example it was a vertical scrollpane and it animated to the nearest image when you released the scrollbar. The actual example was on jsfiddle.net.

I'm in a rush now and can't find the example but that may help you to. If you haven't found it when I'm next in front of the computer I'll try to track it down and update this answer...