0

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

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

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

提前致谢。

4

1 回答 1

0

您可以在任何 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 上。

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

于 2011-01-21T16:50:48.547 回答