jScrollPane绑定到箭头按钮

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

您可以使用jQueryhover功能如下，

http://jsfiddle.net/RZecw/

JS

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

HTML

<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> 

CSS

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

编辑 - 相关评论

隐藏/禁用按钮，如果没有需要对内容进行滚动，你可以检查是否有拖动手柄存在。例如，您可以添加在下面的代码片断结束，

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

if(!$('.jspDrag').length){ 
    /*hide controls or disable them*/ 
    /*$('.btn').css({visibility:"hidden"});*/ 
    $('.btn').css({color:"lightgray"}); 
    $('.btn').off('mouseenter mouseleave'); 
}