jquery - 为 jquery 滚动 Pane 分配新的 Arrows div

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

有谁知道有什么方法可以准确地阐明我应该如何实现这一点，以及需要什么样的脚本来扩展插件以拥有这种功能，而不仅仅是一个滚动 Pane ？

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 和 mouseup 的附加监听器)。代码也可以简化，因此两个按钮共享一个事件处理程序，但我认为这种形式更容易理解(尽管更长)...