Keyboard control for tinyscrollbar.js

Question

I want to add keyboard control for the tiny scrollbar script. i am not very good at javascript. i know that i can use jquery keypress() function to intercept arrow keys(38,40) and then scroll the overview div by changing its css top property.

I can do this outside of the tinyscrollbar plugin but i would love to use the functions that is already inside the plugin to do that.

Any direction on how to start this will be a big help.thanks.

for more information, check tinyscrollbar code here. And more info and demos here.

score 3 · Accepted Answer · answered Nov 01 '12 at 12:55

I added a new function to the plugin and used it to update scroll on keydown event.

Code added to the plugin:

// 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

the code outside the plugin:

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);
    }
  });

the tinyscrollbar_updatescroll scrolls the content to the current position plus the amount sent to it. the original tinyscrollbar_update function scrolls the content to a certain position given in pixels.

score 0 · Answer 2 · answered Oct 31 '12 at 14:28

You will have to extend this plugin to support keydown & keyup events, and add the functionality to scroll according to these key presses. Current scrolling functionality in the plugin is tied directly to dragging using the mouse or mouse wheel changes.

Alternatively you can use something else that has keyboard events built in. E.g. https://github.com/adaburrows/jquery.ui.scrollbar

Keyboard control for tinyscrollbar.js

2 Answers2