Управление клавиатурой для tinyscrollbar.JS

Я хочу добавить управление клавиатурой для скрипта tiny scrollbar. я не очень хорошо разбираюсь в javascript. я знаю, что могу использовать функцию jQuery keypress () для перехвата клавиш со стрелками(38,40), а затем прокручивать обзор div, изменяя его свойство CSS top.

Я могу сделать это за пределами плагина tinyscrollbar, но я хотел бы использовать функции, которые уже находятся внутри плагина, чтобы сделать это.

Любое направление о том, как начать это будет большим подспорьем.спасибо.

Подробнее информация, проверьте tinyscrollbar код здесь . И больше информации и демо здесь.

2 2
jquery keyboard-events

2 ответа:

Я добавил новую функцию в плагин и использовал ее для обновления scroll on keydown event.

Код, добавленный в плагин: 

// 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 прокручивает содержимое до определенной позиции, заданной в пикселях.

3

Вам придется расширить этот плагин, чтобы поддерживать события keydown & keyup, и добавить функциональность для прокрутки в соответствии с этими нажатиями клавиш. Текущая функциональность прокрутки в плагине напрямую связана с перетаскиванием с помощью мыши или колесика мыши изменений.

В качестве альтернативы вы можете использовать что-то еще, что имеет встроенные события клавиатуры. Например, https://github.com/adaburrows/jquery.ui.scrollbar

0