2

小さなスクロールバー スクリプトにキーボード コントロールを追加したいと考えています。私はjavascriptがあまり得意ではありません。jquery keypress() 関数を使用して矢印キー (38,40) をインターセプトし、css top プロパティを変更して概要 div をスクロールできることを知っています。

tinyscrollbar プラグインの外部でこれを行うことができますが、プラグイン内に既にある関数を使用してそれを行いたいと思います。

これを開始する方法についての指示は大きな助けになります。

詳細については、こちらの tinyscrollbar コードを確認してください。詳細情報とデモはこちら.

4

2 に答える 2

3

プラグインに新しい関数を追加し、それを使用してキーダウン イベントのスクロールを更新しました。

プラグインに追加されたコード:

// 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 に答える