鍵盤控制tinyscrollbar.js

我要添加鍵盤控制微小的滾動條腳本。我不是很擅長JavaScript。我知道我可以使用jquery按鍵（）函數來攔截箭頭鍵（38,40），然後通過改變它的CSS top屬性滾動概述DIV。鍵盤控制tinyscrollbar.js

我可以在tinyscrollbar插件之外做到這一點，但我很樂意使用已經在插件中的功能來做到這一點。

如何開始，這將是一個很大的help.thanks任何方向。

瞭解更多信息，請tinyscrollbar code here。和more info and demos here。

2012-10-31 alhoseany

我在插件中添加了一個新函數，並使用它來更新keydown事件上的滾動。

代碼添加到插件：

// define the added function 
jQuery.fn.tinyscrollbar_updatescroll = function(sScroll) 
{ 
    return jQuery(this).data('tsb').updatescroll(sScroll); 
}; 
// end of added function definition 

function Scrollbar(root, options) 
{ 
    var oSelf  = this 
    , oWrapper = root 
    , oViewport = { obj: jQuery('.viewport', root) } 
    , oContent = { obj: jQuery('.overview', root) } 
    , oScrollbar = { obj: jQuery('.scrollbar', root) } 
    , oTrack  = { obj: jQuery('.track', oScrollbar.obj) } 
    , oThumb  = { obj: jQuery('.thumb', oScrollbar.obj) } 
    , sAxis  = options.axis === 'x' 
    , sDirection = sAxis ? 'left' : 'top' 
    , sSize  = sAxis ? 'Width' : 'Height' 
    , iScroll  = 0 
    , iPosition = { start: 0, now: 0 } 
    , iMouse  = {} 
    , touchEvents = 'ontouchstart' in document.documentElement 
    ; 

    function initialize() 
    { 
     oSelf.update(); 
     setEvents(); 

     return oSelf; 
    } 

    // the new added function using the wheel function 
    this.updatescroll = function(sScroll) 
    { 
     if(oContent.ratio < 1) 
     { 

      iScroll -= sScroll; 
      iScroll = Math.min((oContent[ options.axis ] - oViewport[ options.axis ]), Math.max(0, iScroll)); 

      oThumb.obj.css(sDirection, iScroll/oScrollbar.ratio); 
      oContent.obj.css(sDirection, -iScroll); 

     } 
    }; 
    // end of added function

插件以外的代碼：

jQuery('body').keydown(function (event) { 
    if (event.keyCode == 38) { 
     // up arrow 
     $('#scrollbar1').tinyscrollbar_updatescroll(40); 
    } else if (event.keyCode == 40) { 
    // down arrow 
    $('#scrollbar1').tinyscrollbar_updatescroll(-40); 
    } 
    });

的tinyscrollbar_updatescroll滾動內容的當前位置加上發送給它的量。原始的tinyscrollbar_update函數將內容滾動到以像素爲單位的特定位置。

來源

2012-11-01 12:55:42 alhoseany

您將不得不擴展此插件來支持keydown &鍵入事件，並添加按照這些按鍵進行滾動的功能。插件中的當前滾動功能直接與使用鼠標或鼠標滾輪更改進行拖動相關聯。

或者，您可以使用其他內置鍵盤事件的其他設備。例如， https://github.com/adaburrows/jquery.ui.scrollbar

來源

2012-10-31 14:28:46 mccannf

鍵盤控制tinyscrollbar.js

回答

相關問題