SHARE
TWEET

Tinyscrollbar with Actual

manchumahara Mar 11th, 2013 374 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * Tiny Scrollbar
  3.  * http://www.baijs.nl/tinyscrollbar/
  4.  *
  5.  * Dual licensed under the MIT or GPL Version 2 licenses.
  6.  * http://www.opensource.org/licenses/mit-license.php
  7.  * http://www.opensource.org/licenses/gpl-2.0.php
  8.  *
  9.  * Date: 13 / 08 / 2012
  10.  * @version 1.81
  11.  * @author Maarten Baijs
  12.  *
  13.  */
  14. ;( function( $ )
  15. {
  16.     $.tiny = $.tiny || { };
  17.  
  18.     $.tiny.scrollbar = {
  19.         options: {
  20.                 axis         : 'y'    // vertical or horizontal scrollbar? ( x || y ).
  21.             ,   wheel        : 40     // how many pixels must the mouswheel scroll at a time.
  22.             ,   scroll       : true   // enable or disable the mousewheel.
  23.             ,   lockscroll   : true   // return scrollwheel to browser if there is no more content.
  24.             ,   size         : 'auto' // set the size of the scrollbar to auto or a fixed number.
  25.             ,   sizethumb    : 'auto' // set the size of the thumb to auto or a fixed number.
  26.             ,   invertscroll : false  // Enable mobile invert style scrolling
  27.         }
  28.     };
  29.  
  30.     $.fn.tinyscrollbar = function( params )
  31.     {
  32.         var options = $.extend( {}, $.tiny.scrollbar.options, params );
  33.        
  34.         this.each( function()
  35.         {
  36.             $( this ).data('tsb', new Scrollbar( $( this ), options ) );
  37.         });
  38.  
  39.         return this;
  40.     };
  41.  
  42.     $.fn.tinyscrollbar_update = function(sScroll)
  43.     {
  44.         return $( this ).data( 'tsb' ).update( sScroll );
  45.     };
  46.  
  47.     function Scrollbar( root, options )
  48.     {
  49.         var oSelf       = this
  50.         ,   oWrapper    = root
  51.         ,   oViewport   = { obj: $( '.viewport', root ) }
  52.         ,   oContent    = { obj: $( '.overview', root ) }
  53.         ,   oScrollbar  = { obj: $( '.scrollbar', root ) }
  54.         ,   oTrack      = { obj: $( '.track', oScrollbar.obj ) }
  55.         ,   oThumb      = { obj: $( '.thumb', oScrollbar.obj ) }
  56.         ,   sAxis       = options.axis === 'x'
  57.         ,   sDirection  = sAxis ? 'left' : 'top'
  58.         ,   sSize       = sAxis ? 'Width' : 'Height'
  59.         ,   iScroll     = 0
  60.         ,   iPosition   = { start: 0, now: 0 }
  61.         ,   iMouse      = {}
  62.         ,   touchEvents = 'ontouchstart' in document.documentElement
  63.         ;
  64.  
  65.         function initialize()
  66.         {
  67.             oSelf.update();
  68.             setEvents();
  69.  
  70.             return oSelf;
  71.         }
  72.  
  73.         this.update = function( sScroll )
  74.         {
  75.             oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ];
  76.             oContent[ options.axis ]  = oContent.obj[0][ 'scroll'+ sSize ];
  77.  
  78.             sSizecb                       = sAxis ? 'width' : 'height';
  79.             var oViewportaxis             = $(oWrapper).children('div.viewport').actual(sSizecb) ;
  80.             var oContentaxis              = $(oWrapper).children('div.viewport').children('div.overview').actual(sSizecb) ;                        
  81.            
  82.             oViewport[ options.axis ]     = oViewportaxis;
  83.             oContent[ options.axis ]      = oContentaxis;
  84.  
  85.  
  86.             oContent.ratio            = oViewport[ options.axis ] / oContent[ options.axis ];
  87.  
  88.             oScrollbar.obj.toggleClass( 'disable', oContent.ratio >= 1 );
  89.  
  90.             oTrack[ options.axis ] = options.size === 'auto' ? oViewport[ options.axis ] : options.size;
  91.             oThumb[ options.axis ] = Math.min( oTrack[ options.axis ], Math.max( 0, ( options.sizethumb === 'auto' ? ( oTrack[ options.axis ] * oContent.ratio ) : options.sizethumb ) ) );
  92.        
  93.             oScrollbar.ratio = options.sizethumb === 'auto' ? ( oContent[ options.axis ] / oTrack[ options.axis ] ) : ( oContent[ options.axis ] - oViewport[ options.axis ] ) / ( oTrack[ options.axis ] - oThumb[ options.axis ] );
  94.            
  95.             iScroll = ( sScroll === 'relative' && oContent.ratio <= 1 ) ? Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll )) : 0;
  96.             iScroll = ( sScroll === 'bottom' && oContent.ratio <= 1 ) ? ( oContent[ options.axis ] - oViewport[ options.axis ] ) : isNaN( parseInt( sScroll, 10 ) ) ? iScroll : parseInt( sScroll, 10 );
  97.            
  98.             setSize();
  99.         };
  100.  
  101.         function setSize()
  102.         {
  103.             var sCssSize = sSize.toLowerCase();
  104.  
  105.             oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
  106.             oContent.obj.css( sDirection, -iScroll );
  107.             iMouse.start = oThumb.obj.offset()[ sDirection ];
  108.  
  109.             oScrollbar.obj.css( sCssSize, oTrack[ options.axis ] );
  110.             oTrack.obj.css( sCssSize, oTrack[ options.axis ] );
  111.             oThumb.obj.css( sCssSize, oThumb[ options.axis ] );
  112.         }
  113.  
  114.         function setEvents()
  115.         {
  116.             if( ! touchEvents )
  117.             {
  118.                 oThumb.obj.bind( 'mousedown', start );
  119.                 oTrack.obj.bind( 'mouseup', drag );
  120.             }
  121.             else
  122.             {
  123.                 oViewport.obj[0].ontouchstart = function( event )
  124.                 {  
  125.                     if( 1 === event.touches.length )
  126.                     {
  127.                         start( event.touches[ 0 ] );
  128.                         event.stopPropagation();
  129.                     }
  130.                 };
  131.             }
  132.  
  133.             if( options.scroll && window.addEventListener )
  134.             {
  135.                 oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
  136.                 oWrapper[0].addEventListener( 'mousewheel', wheel, false );
  137.                 oWrapper[0].addEventListener( 'MozMousePixelScroll', function( event ){
  138.                     event.preventDefault();
  139.                 }, false);
  140.             }
  141.             else if( options.scroll )
  142.             {
  143.                 oWrapper[0].onmousewheel = wheel;
  144.             }
  145.         }
  146.  
  147.         function start( event )
  148.         {
  149.             $( "body" ).addClass( "noSelect" );
  150.  
  151.             var oThumbDir   = parseInt( oThumb.obj.css( sDirection ), 10 );
  152.             iMouse.start    = sAxis ? event.pageX : event.pageY;
  153.             iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
  154.            
  155.             if( ! touchEvents )
  156.             {
  157.                 $( document ).bind( 'mousemove', drag );
  158.                 $( document ).bind( 'mouseup', end );
  159.                 oThumb.obj.bind( 'mouseup', end );
  160.             }
  161.             else
  162.             {
  163.                 document.ontouchmove = function( event )
  164.                 {
  165.                     event.preventDefault();
  166.                     drag( event.touches[ 0 ] );
  167.                 };
  168.                 document.ontouchend = end;        
  169.             }
  170.         }
  171.  
  172.         function wheel( event )
  173.         {
  174.             if( oContent.ratio < 1 )
  175.             {
  176.                 var oEvent = event || window.event
  177.                 ,   iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3
  178.                 ;
  179.  
  180.                 iScroll -= iDelta * options.wheel;
  181.                 iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll ));
  182.  
  183.                 oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
  184.                 oContent.obj.css( sDirection, -iScroll );
  185.  
  186.                 if( options.lockscroll || ( iScroll !== ( oContent[ options.axis ] - oViewport[ options.axis ] ) && iScroll !== 0 ) )
  187.                 {
  188.                     oEvent = $.event.fix( oEvent );
  189.                     oEvent.preventDefault();
  190.                 }
  191.             }
  192.         }
  193.  
  194.         function drag( event )
  195.         {
  196.             if( oContent.ratio < 1 )
  197.             {
  198.                 if( options.invertscroll && touchEvents )
  199.                 {
  200.                     iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
  201.                 }
  202.                 else
  203.                 {
  204.                      iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
  205.                 }
  206.  
  207.                 iScroll = iPosition.now * oScrollbar.ratio;
  208.                 oContent.obj.css( sDirection, -iScroll );
  209.                 oThumb.obj.css( sDirection, iPosition.now );
  210.             }
  211.         }
  212.        
  213.         function end()
  214.         {
  215.             $( "body" ).removeClass( "noSelect" );
  216.             $( document ).unbind( 'mousemove', drag );
  217.             $( document ).unbind( 'mouseup', end );
  218.             oThumb.obj.unbind( 'mouseup', end );
  219.             document.ontouchmove = document.ontouchend = null;
  220.         }
  221.  
  222.         return initialize();
  223.     }
  224.  
  225. }(jQuery));
RAW Paste Data
Top