将scrollByX和scrollByY分配给jScrollPane中的jspDrag？

Question

我正在为一个涉及水平滚动的项目实现 jScrollPane。客户端希望水平滚动以增量方式进行，以便用户基本上可以从一张幻灯片跳到另一张幻灯片。

我可以使用 jScrollPane 的 API 和“scrollByX”在箭头上执行此操作。然而，问题在于用户可以单击滚动条并前后拖动并以这种方式滚动内容。

有没有办法将“scrollByX”（或“scrollByY”，就此而言）分配给jspDrag，以便当用户拖动滚动条时，滚动不是连续的，而是增量的？

提前致谢。

Answer 1

您可以在任何 jsp-scroll-x 事件之后监听 mouseup 事件，这样您就可以找出最近的项目在哪里，并使用 jScrollPane API 滚动到该元素的位置。我已经更新了您找到的示例，以便它以这种方式工作（正如您注意到的那样，它以前只向前滚动）：

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

（显然这段代码是垂直工作的，但你可以将 y 更改为 x 以及将顶部更改为左侧等）

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');

---

原始答案：

可以做你想做的事，我在某处写了一个例子 您可以在 jScrollPane 邮件列表 上找到它 - 在示例中它是垂直滚动窗格，当您释放滚动条时，它会动画到最近的图像。实际示例位于 jsfiddle.net 上。

我现在很着急，找不到这个例子，但这可能对你有帮助。如果当我下次在电脑前时你还没有找到它，我会尝试找到它并更新这个答案......