键盘控制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

回答

相关问题