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