JAVASCRIPT   69

jquery slimscroll js

Guest on 28th May 2022 01:30:16 AM

  1. /*! Copyright (c) Piotr Rochala (http://rocha.la)
  2.  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  3.  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  4.  *
  5.  * Version: 1.1.1
  6.  *
  7.  */
  8. (function($) {
  9.  
  10.   jQuery.fn.extend({
  11.     slimScroll: function(options) {
  12.  
  13.       var defaults = {
  14.  
  15.         // width in pixels of the visible scroll area
  16.         width : 'auto',
  17.  
  18.         // height in pixels of the visible scroll area
  19.         height : '250px',
  20.  
  21.         // width in pixels of the scrollbar and rail
  22.         size : '7px',
  23.  
  24.         // scrollbar color, accepts any hex/color value
  25.         color: '#000',
  26.  
  27.         // scrollbar position - left/right
  28.         position : 'right',
  29.  
  30.         // distance in pixels between the side edge and the scrollbar
  31.         distance : '1px',
  32.  
  33.         // default scroll position on load - top / bottom / $('selector')
  34.         start : 'top',
  35.  
  36.         // sets scrollbar opacity
  37.         opacity : .4,
  38.  
  39.         // enables always-on mode for the scrollbar
  40.         alwaysVisible : false,
  41.  
  42.         // check if we should hide the scrollbar when user is hovering over
  43.         disableFadeOut: false,
  44.  
  45.         // sets visibility of the rail
  46.         railVisible : false,
  47.  
  48.         // sets rail color
  49.         railColor : '#333',
  50.  
  51.         // sets rail opacity
  52.         railOpacity : .2,
  53.  
  54.         // whether  we should use jQuery UI Draggable to enable bar dragging
  55.         railDraggable : true,
  56.  
  57.         // defautlt CSS class of the slimscroll rail
  58.         railClass : 'slimScrollRail',
  59.  
  60.         // defautlt CSS class of the slimscroll bar
  61.         barClass : 'slimScrollBar',
  62.  
  63.         // defautlt CSS class of the slimscroll wrapper
  64.         wrapperClass : 'slimScrollDiv',
  65.  
  66.         // check if mousewheel should scroll the window if we reach top/bottom
  67.         allowPageScroll : false,
  68.  
  69.         // scroll amount applied to each mouse wheel step
  70.         wheelStep : 20,
  71.  
  72.         // scroll amount applied when user is using gestures
  73.         touchScrollStep : 200
  74.       };
  75.  
  76.       var o = $.extend(defaults, options);
  77.  
  78.       // do it for every element that matches selector
  79.       this.each(function(){
  80.  
  81.       var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
  82.         barHeight, percentScroll, lastScroll,
  83.         divS = '<div></div>',
  84.         minBarHeight = 30,
  85.         releaseScroll = false;
  86.  
  87.         // used in event handlers and for better minification
  88.         var me = $(this);
  89.  
  90.         // ensure we are not binding it again
  91.         if (me.parent().hasClass(o.wrapperClass))
  92.         {
  93.             // start from last bar position
  94.             var offset = me.scrollTop();
  95.  
  96.             // find bar and rail
  97.             bar = me.parent().find('.' + o.barClass);
  98.             rail = me.parent().find('.' + o.railClass);
  99.  
  100.             getBarHeight();
  101.  
  102.             // check if we should scroll existing instance
  103.             if ($.isPlainObject(options))
  104.             {
  105.               // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
  106.               if ( 'height' in options && options.height == 'auto' ) {
  107.                 me.parent().css('height', 'auto');
  108.                 me.css('height', 'auto');
  109.                 var height = me.parent().parent().innerHeight();
  110.                 me.parent().css('height', height);
  111.                 me.css('height', height);
  112.               }
  113.  
  114.               if ('scrollTo' in options)
  115.               {
  116.                 // jump to a static point
  117.                 offset = parseInt(o.scrollTo);
  118.               }
  119.               else if ('scrollBy' in options)
  120.               {
  121.                 // jump by value pixels
  122.                 offset += parseInt(o.scrollBy);
  123.               }
  124.               else if ('destroy' in options)
  125.               {
  126.                 // remove slimscroll elements
  127.                 bar.remove();
  128.                 rail.remove();
  129.                 me.unwrap();
  130.                 return;
  131.               }
  132.  
  133.               // scroll content by the given offset
  134.               scrollContent(offset, false, true);
  135.             }
  136.  
  137.             return;
  138.         }
  139.  
  140.         // optionally set height to the parent's height
  141.         o.height = (o.height == 'auto') ? me.parent().innerHeight() : o.height;
  142.  
  143.         // wrap content
  144.         var wrapper = $(divS)
  145.           .addClass(o.wrapperClass)
  146.           .css({
  147.             position: 'relative',
  148.             overflow: 'hidden',
  149.             width: o.width,
  150.             height: o.height
  151.           });
  152.  
  153.         // update style for the div
  154.         me.css({
  155.           overflow: 'hidden',
  156.           width: o.width,
  157.           height: o.height
  158.         });
  159.  
  160.         // create scrollbar rail
  161.         var rail = $(divS)
  162.           .addClass(o.railClass)
  163.           .css({
  164.             width: o.size,
  165.             height: '100%',
  166.             position: 'absolute',
  167.             top: 0,
  168.             display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
  169.             'border-radius': o.size,
  170.             background: o.railColor,
  171.             opacity: o.railOpacity,
  172.             zIndex: 90
  173.           });
  174.  
  175.         // create scrollbar
  176.         var bar = $(divS)
  177.           .addClass(o.barClass)
  178.           .css({
  179.             background: o.color,
  180.             width: o.size,
  181.             position: 'absolute',
  182.             top: 0,
  183.             opacity: o.opacity,
  184.             display: o.alwaysVisible ? 'block' : 'none',
  185.             'border-radius' : o.size,
  186.             BorderRadius: o.size,
  187.             MozBorderRadius: o.size,
  188.             WebkitBorderRadius: o.size,
  189.             zIndex: 99
  190.           });
  191.  
  192.         // set position
  193.         var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
  194.         rail.css(posCss);
  195.         bar.css(posCss);
  196.  
  197.         // wrap it
  198.         me.wrap(wrapper);
  199.  
  200.         // append to parent div
  201.         me.parent().append(bar);
  202.         me.parent().append(rail);
  203.  
  204.         // make it draggable
  205.         if (o.railDraggable)
  206.         {
  207.           bar.draggable({
  208.             axis: 'y',
  209.             containment: 'parent',
  210.             start: function() { isDragg = true; },
  211.             stop: function() { isDragg = false; hideBar(); },
  212.             drag: function(e)
  213.             {
  214.               // scroll content
  215.               scrollContent(0, $(this).position().top, false);
  216.             }
  217.           });
  218.         }
  219.  
  220.         // on rail over
  221.         rail.hover(function(){
  222.           showBar();
  223.         }, function(){
  224.           hideBar();
  225.         });
  226.  
  227.         // on bar over
  228.         bar.hover(function(){
  229.           isOverBar = true;
  230.         }, function(){
  231.           isOverBar = false;
  232.         });
  233.  
  234.         // show on parent mouseover
  235.         me.hover(function(){
  236.           isOverPanel = true;
  237.           showBar();
  238.           hideBar();
  239.         }, function(){
  240.           isOverPanel = false;
  241.           hideBar();
  242.         });
  243.  
  244.         // support for mobile
  245.         me.bind('touchstart', function(e,b){
  246.           if (e.originalEvent.touches.length)
  247.           {
  248.             // record where touch started
  249.             touchDif = e.originalEvent.touches[0].pageY;
  250.           }
  251.         });
  252.  
  253.         me.bind('touchmove', function(e){
  254.           // prevent scrolling the page
  255.           e.originalEvent.preventDefault();
  256.           if (e.originalEvent.touches.length)
  257.           {
  258.             // see how far user swiped
  259.             var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
  260.             // scroll content
  261.             scrollContent(diff, true);
  262.           }
  263.         });
  264.  
  265.         // check start position
  266.         if (o.start === 'bottom')
  267.         {
  268.           // scroll content to bottom
  269.           bar.css({ top: me.outerHeight() - bar.outerHeight() });
  270.           scrollContent(0, true);
  271.         }
  272.         else if (o.start !== 'top')
  273.         {
  274.           // assume jQuery selector
  275.           scrollContent($(o.start).position().top, null, true);
  276.  
  277.           // make sure bar stays hidden
  278.           if (!o.alwaysVisible) { bar.hide(); }
  279.         }
  280.  
  281.         // attach scroll events
  282.         attachWheel();
  283.  
  284.         // set up initial height
  285.         getBarHeight();
  286.  
  287.         function _onWheel(e)
  288.         {
  289.           // use mouse wheel only when mouse is over
  290.           if (!isOverPanel) { return; }
  291.  
  292.           var e = e || window.event;
  293.  
  294.           var delta = 0;
  295.           if (e.wheelDelta) { delta = -e.wheelDelta/120; }
  296.           if (e.detail) { delta = e.detail / 3; }
  297.  
  298.           var target = e.target || e.srcTarget;
  299.           if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
  300.             // scroll content
  301.             scrollContent(delta, true);
  302.           }
  303.  
  304.           // stop window scroll
  305.           if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
  306.           if (!releaseScroll) { e.returnValue = false; }
  307.         }
  308.  
  309.         function scrollContent(y, isWheel, isJump)
  310.         {
  311.           var delta = y;
  312.           var maxTop = me.outerHeight() - bar.outerHeight();
  313.  
  314.           if (isWheel)
  315.           {
  316.             // move bar with mouse wheel
  317.             delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
  318.  
  319.             // move bar, make sure it doesn't go out
  320.             delta = Math.min(Math.max(delta, 0), maxTop);
  321.  
  322.             // if scrolling down, make sure a fractional change to the
  323.             // scroll position isn't rounded away when the scrollbar's CSS is set
  324.             // this flooring of delta would happened automatically when
  325.             // bar.css is set below, but we floor here for clarity
  326.             delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
  327.  
  328.             // scroll the scrollbar
  329.             bar.css({ top: delta + 'px' });
  330.           }
  331.  
  332.           // calculate actual scroll amount
  333.           percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
  334.           delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
  335.  
  336.           if (isJump)
  337.           {
  338.             delta = y;
  339.             var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
  340.             offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
  341.             bar.css({ top: offsetTop + 'px' });
  342.           }
  343.  
  344.           // scroll content
  345.           me.scrollTop(delta);
  346.  
  347.           // fire scrolling event
  348.           me.trigger('slimscrolling', ~~delta);
  349.  
  350.           // ensure bar is visible
  351.           showBar();
  352.  
  353.           // trigger hide when scroll is stopped
  354.           hideBar();
  355.         }
  356.  
  357.         function attachWheel()
  358.         {
  359.           if (window.addEventListener)
  360.           {
  361.             this.addEventListener('DOMMouseScroll', _onWheel, false );
  362.             this.addEventListener('mousewheel', _onWheel, false );
  363.           }
  364.           else
  365.           {
  366.             document.attachEvent("onmousewheel", _onWheel)
  367.           }
  368.         }
  369.  
  370.         function getBarHeight()
  371.         {
  372.           // calculate scrollbar height and make sure it is not too small
  373.           barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
  374.           bar.css({ height: barHeight + 'px' });
  375.  
  376.           // hide scrollbar if content is not long enough
  377.           var display = barHeight == me.outerHeight() ? 'none' : 'block';
  378.           bar.css({ display: display });
  379.         }
  380.  
  381.         function showBar()
  382.         {
  383.           // recalculate bar height
  384.           getBarHeight();
  385.           clearTimeout(queueHide);
  386.  
  387.           // when bar reached top or bottom
  388.           if (percentScroll == ~~percentScroll)
  389.           {
  390.             //release wheel
  391.             releaseScroll = o.allowPageScroll;
  392.  
  393.             // publish approporiate event
  394.             if (lastScroll != percentScroll)
  395.             {
  396.                 var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
  397.                 me.trigger('slimscroll', msg);
  398.             }
  399.           }
  400.           lastScroll = percentScroll;
  401.  
  402.           // show only when required
  403.           if(barHeight >= me.outerHeight()) {
  404.             //allow window scroll
  405.             releaseScroll = true;
  406.             return;
  407.           }
  408.           bar.stop(true,true).fadeIn('fast');
  409.           if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
  410.         }
  411.  
  412.         function hideBar()
  413.         {
  414.           // only hide when options allow it
  415.           if (!o.alwaysVisible)
  416.           {
  417.             queueHide = setTimeout(function(){
  418.               if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
  419.               {
  420.                 bar.fadeOut('slow');
  421.                 rail.fadeOut('slow');
  422.               }
  423.             }, 1000);
  424.           }
  425.         }
  426.  
  427.       });
  428.  
  429.       // maintain chainability
  430.       return this;
  431.     }
  432.   });
  433.  
  434.   jQuery.fn.extend({
  435.     slimscroll: jQuery.fn.slimScroll
  436.   });
  437.  
  438. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.