Question

我正在使用jScrollPane插件，我需要将操作绑定到我拥有的几个箭头按钮，而不是使用插件生成的滚动条/箭头。我找到了以下代码，它让我走了一半：

var api = $('.scroll-pane').jScrollPane().data('jsp');
$('#scroll-up').bind('click', function () {
    api.scrollByY(-10);
    return false;
});
$('#scroll-down').bind('click', function () {
    api.scrollByY(10);
    return false;
});

它的工作原理很好，但我真正需要的是它可以像你启用arrowScrollOnHover那样滚动。 JS / jQuery不是我的强项，所以任何帮助都会非常感激。

谢谢！

Answer 1

您可以使用hover的{{1}}功能，如下所示，

http://jsfiddle.net/RZecw/

<强> JS

jQuery

<强> HTML

var stopScrollingDown = true,stopScrollingUp = true;
var api = $('.scroll-pane').jScrollPane().data('jsp');
$('#scroll-up').hover(

function () {
    stopScrollingUp = false;
    scrollUp();
}, function () {
    stopScrollingUp = true;
});
$('#scroll-down').hover(function () {
    stopScrollingDown = false;
    scrollDown();
}, function () {
    stopScrollingDown = true;
});

function scrollUp() {
    if (!stopScrollingUp) {
        api.scrollByY(-10);
        setTimeout(scrollUp, 80);/*the smaller this value (80) is the faster it will move*/
    }
}

function scrollDown() {
    if (!stopScrollingDown) {
        api.scrollByY(10);
        setTimeout(scrollDown, 80);
    }
}

<强> CSS

<div class="scroll-pane"> <b>An Iframe at the bottom</b>

    <p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML which can be styled at will.This demonstration shows basic use of the jScrollPane 
....
</div>
<div id="scroll-up" class="btn">[up]</div>
<br/>
<div id="scroll-down" class="btn">[down]</div>

编辑 - 与评论相关

要在不需要滚动内容的情况下隐藏/禁用按钮，可以检查是否存在拖动句柄。例如，您可以在代码末尾添加以下代码段

http://jsfiddle.net/RZecw/2/

.scroll-pane {
    height:100px;
}
.btn{
    display:inline;
}

jScrollPane绑定到箭头按钮

1 个答案: