2

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

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

任何关于如何开始的方向都会有很大的帮助。谢谢。

有关更多信息，请在此处查看 tinyscrollbar 代码。更多信息和演示在这里。

4

2 回答 2

3

我在插件中添加了一个新功能，并用它来更新 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-01T12:55:42.560 回答
0

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

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

于 2012-10-31T14:28:46.787 回答