Question

我想为微小的滚动条脚本添加键盘控制。我不是很擅长javascript。我知道我可以使用jquery keypress（）函数拦截箭头键（38,40），然后通过更改其css top属性滚动概述div。

我可以在tinyscrollbar插件之外执行此操作，但我很乐意使用插件中已有的功能来执行此操作。

如何开始这个任何方向将是一个很大的帮助。谢谢。

有关详情，请查看tinyscrollbar code here。并more info and demos here。

Answer 1

我在插件中添加了一个新函数，并用它来更新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函数将内容滚动到以像素为单位的特定位置。

Answer 2

您必须扩展此插件以支持keydown＆amp;键盘事件，并根据这些按键添加滚动功能。插件中的当前滚动功能直接与使用鼠标或鼠标滚轮更改的拖动相关联。

或者，您可以使用内置键盘事件的其他内容。例如。 https://github.com/adaburrows/jquery.ui.scrollbar

tinyscrollbar.js的键盘控制

2 个答案: