Question

我正在自定义一个UI滚动窗口，水平滚动填充图片。我已将jquery scroll-pane应用于容器div，并成功应用了客户滚动条。它就像这样简单......并将main-scroll-pane类添加到描述的窗口中。

$(function()
{
    $('.main-scroll-pane').jScrollPane();
});

我要做的是将箭头div重新定义为位于容器div外部的箭头，两侧......

我可以实现任何类型的脚本来获取

$(function(){$('.main-scroll-pane-left-arrow').jScrollPane();});

在div class=".scroll-pane-left-arrow"

上运行

我已经阅读了一些API，这是允许的： http://jscrollpane.kelvinluck.com/api.html

有没有人知道如何澄清我应该如何实现这个以及扩展插件需要什么样的脚本才能为多个滚动窗格提供这种功能？

Answer 1

这个问题在这里被问到并回答： creating jscrollpane-arrows outsite jspContainer

但是从那时起详细说明我的答案，这是一个例子： http://jsfiddle.net/WzNM4/6/

您需要为链接添加侦听器，然后使用jScrollPane API告诉jScrollPane滚动：

$(function()
{
    var api = $('.scroll-pane').jScrollPane().data('jsp');
    $('#scroll-up').bind(
        'mousedown',
        function()
        {
            var interval = setInterval(
                function()
                {
                    api.scrollByY(-5);
                },
                100
            );
            $(window).bind(
                'mouseup.jspExample',
                function()
                {
                    clearInterval(interval);
                    $(document).unbind('.jspExample');
                }
            );
        }
    );
    $('#scroll-down').bind(
        'mousedown',
        function()
        {
            var interval = setInterval(
                function()
                {
                    api.scrollByY(5);
                },
                100
            );
            $(window).bind(
                'mouseup.jspExample',
                function()
                {
                    clearInterval(interval);
                    $(document).unbind('.jspExample');
                }
            );
        }
    );
});

请注意，代码有点复杂，因为我想展示如何在按住鼠标按钮的同时使滚动继续发生（因此需要setInterval和鼠标添加的附加侦听器）。代码也可以简化，所以两个按钮共享一个事件处理程序，但我认为这种形式更容易理解（虽然更长）......

Answer 2

基于上述版本，这是一个水平替代http://jsfiddle.net/WzNM4/119/

为jquery滚动窗格分配新的箭头div

2 个答案: