JAVASCRIPT   51

jquery slimscroll js

Guest on 13th August 2022 12:47:10 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.3.0
  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.         // sets border radius
  76.         borderRadius: '7px',
  77.  
  78.         // sets border radius of the rail
  79.         railBorderRadius : '7px'
  80.       };
  81.  
  82.       var o = $.extend(defaults, options);
  83.  
  84.       // do it for every element that matches selector
  85.       this.each(function(){
  86.  
  87.       var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
  88.         barHeight, percentScroll, lastScroll,
  89.         divS = '<div></div>',
  90.         minBarHeight = 30,
  91.         releaseScroll = false;
  92.  
  93.         // used in event handlers and for better minification
  94.         var me = $(this);
  95.  
  96.         // ensure we are not binding it again
  97.         if (me.parent().hasClass(o.wrapperClass))
  98.         {
  99.             // start from last bar position
  100.             var offset = me.scrollTop();
  101.  
  102.             // find bar and rail
  103.             bar = me.parent().find('.' + o.barClass);
  104.             rail = me.parent().find('.' + o.railClass);
  105.  
  106.             getBarHeight();
  107.  
  108.             // check if we should scroll existing instance
  109.             if ($.isPlainObject(options))
  110.             {
  111.               // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
  112.               if ( 'height' in options && options.height == 'auto' ) {
  113.                 me.parent().css('height', 'auto');
  114.                 me.css('height', 'auto');
  115.                 var height = me.parent().parent().height();
  116.                 me.parent().css('height', height);
  117.                 me.css('height', height);
  118.               }
  119.  
  120.               if ('scrollTo' in options)
  121.               {
  122.                 // jump to a static point
  123.                 offset = parseInt(o.scrollTo);
  124.               }
  125.               else if ('scrollBy' in options)
  126.               {
  127.                 // jump by value pixels
  128.                 offset += parseInt(o.scrollBy);
  129.               }
  130.               else if ('destroy' in options)
  131.               {
  132.                 // remove slimscroll elements
  133.                 bar.remove();
  134.                 rail.remove();
  135.                 me.unwrap();
  136.                 return;
  137.               }
  138.  
  139.               // scroll content by the given offset
  140.               scrollContent(offset, false, true);
  141.             }
  142.  
  143.             return;
  144.         }
  145.  
  146.         // optionally set height to the parent's height
  147.         o.height = (o.height == 'auto') ? me.parent().height() : o.height;
  148.  
  149.         // wrap content
  150.         var wrapper = $(divS)
  151.           .addClass(o.wrapperClass)
  152.           .css({
  153.             position: 'relative',
  154.             overflow: 'hidden',
  155.             width: o.width,
  156.             height: o.height
  157.           });
  158.  
  159.         // update style for the div
  160.         me.css({
  161.           overflow: 'hidden',
  162.           width: o.width,
  163.           height: o.height
  164.         });
  165.  
  166.         // create scrollbar rail
  167.         var rail = $(divS)
  168.           .addClass(o.railClass)
  169.           .css({
  170.             width: o.size,
  171.             height: '100%',
  172.             position: 'absolute',
  173.             top: 0,
  174.             display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
  175.             'border-radius': o.railBorderRadius,
  176.             background: o.railColor,
  177.             opacity: o.railOpacity,
  178.             zIndex: 90
  179.           });
  180.  
  181.         // create scrollbar
  182.         var bar = $(divS)
  183.           .addClass(o.barClass)
  184.           .css({
  185.             background: o.color,
  186.             width: o.size,
  187.             position: 'absolute',
  188.             top: 0,
  189.             opacity: o.opacity,
  190.             display: o.alwaysVisible ? 'block' : 'none',
  191.             'border-radius' : o.borderRadius,
  192.             BorderRadius: o.borderRadius,
  193.             MozBorderRadius: o.borderRadius,
  194.             WebkitBorderRadius: o.borderRadius,
  195.             zIndex: 99
  196.           });
  197.  
  198.         // set position
  199.         var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
  200.         rail.css(posCss);
  201.         bar.css(posCss);
  202.  
  203.         // wrap it
  204.         me.wrap(wrapper);
  205.  
  206.         // append to parent div
  207.         me.parent().append(bar);
  208.         me.parent().append(rail);
  209.  
  210.         // make it draggable and no longer dependent on the jqueryUI
  211.         if (o.railDraggable){
  212.           bar.bind("mousedown", function(e) {
  213.             var $doc = $(document);
  214.             isDragg = true;
  215.             t = parseFloat(bar.css('top'));
  216.             pageY = e.pageY;
  217.  
  218.             $doc.bind("mousemove.slimscroll", function(e){
  219.               currTop = t + e.pageY - pageY;
  220.               bar.css('top', currTop);
  221.               scrollContent(0, bar.position().top, false);// scroll content
  222.             });
  223.  
  224.             $doc.bind("mouseup.slimscroll", function(e) {
  225.               isDragg = false;hideBar();
  226.               $doc.unbind('.slimscroll');
  227.             });
  228.             return false;
  229.           }).bind("selectstart.slimscroll", function(e){
  230.             e.stopPropagation();
  231.             e.preventDefault();
  232.             return false;
  233.           });
  234.         }
  235.  
  236.         // on rail over
  237.         rail.hover(function(){
  238.           showBar();
  239.         }, function(){
  240.           hideBar();
  241.         });
  242.  
  243.         // on bar over
  244.         bar.hover(function(){
  245.           isOverBar = true;
  246.         }, function(){
  247.           isOverBar = false;
  248.         });
  249.  
  250.         // show on parent mouseover
  251.         me.hover(function(){
  252.           isOverPanel = true;
  253.           showBar();
  254.           hideBar();
  255.         }, function(){
  256.           isOverPanel = false;
  257.           hideBar();
  258.         });
  259.  
  260.         // support for mobile
  261.         me.bind('touchstart', function(e,b){
  262.           if (e.originalEvent.touches.length)
  263.           {
  264.             // record where touch started
  265.             touchDif = e.originalEvent.touches[0].pageY;
  266.           }
  267.         });
  268.  
  269.         me.bind('touchmove', function(e){
  270.           // prevent scrolling the page if necessary
  271.           if(!releaseScroll)
  272.           {
  273.                       e.originalEvent.preventDefault();
  274.                       }
  275.           if (e.originalEvent.touches.length)
  276.           {
  277.             // see how far user swiped
  278.             var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
  279.             // scroll content
  280.             scrollContent(diff, true);
  281.             touchDif = e.originalEvent.touches[0].pageY;
  282.           }
  283.         });
  284.  
  285.         // set up initial height
  286.         getBarHeight();
  287.  
  288.         // check start position
  289.         if (o.start === 'bottom')
  290.         {
  291.           // scroll content to bottom
  292.           bar.css({ top: me.outerHeight() - bar.outerHeight() });
  293.           scrollContent(0, true);
  294.         }
  295.         else if (o.start !== 'top')
  296.         {
  297.           // assume jQuery selector
  298.           scrollContent($(o.start).position().top, null, true);
  299.  
  300.           // make sure bar stays hidden
  301.           if (!o.alwaysVisible) { bar.hide(); }
  302.         }
  303.  
  304.         // attach scroll events
  305.         attachWheel();
  306.  
  307.         function _onWheel(e)
  308.         {
  309.           // use mouse wheel only when mouse is over
  310.           if (!isOverPanel) { return; }
  311.  
  312.           var e = e || window.event;
  313.  
  314.           var delta = 0;
  315.           if (e.wheelDelta) { delta = -e.wheelDelta/120; }
  316.           if (e.detail) { delta = e.detail / 3; }
  317.  
  318.           var target = e.target || e.srcTarget || e.srcElement;
  319.           if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
  320.             // scroll content
  321.             scrollContent(delta, true);
  322.           }
  323.  
  324.           // stop window scroll
  325.           if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
  326.           if (!releaseScroll) { e.returnValue = false; }
  327.         }
  328.  
  329.         function scrollContent(y, isWheel, isJump)
  330.         {
  331.           releaseScroll = false;
  332.           var delta = y;
  333.           var maxTop = me.outerHeight() - bar.outerHeight();
  334.  
  335.           if (isWheel)
  336.           {
  337.             // move bar with mouse wheel
  338.             delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
  339.  
  340.             // move bar, make sure it doesn't go out
  341.             delta = Math.min(Math.max(delta, 0), maxTop);
  342.  
  343.             // if scrolling down, make sure a fractional change to the
  344.             // scroll position isn't rounded away when the scrollbar's CSS is set
  345.             // this flooring of delta would happened automatically when
  346.             // bar.css is set below, but we floor here for clarity
  347.             delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
  348.  
  349.             // scroll the scrollbar
  350.             bar.css({ top: delta + 'px' });
  351.           }
  352.  
  353.           // calculate actual scroll amount
  354.           percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
  355.           delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
  356.  
  357.           if (isJump)
  358.           {
  359.             delta = y;
  360.             var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
  361.             offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
  362.             bar.css({ top: offsetTop + 'px' });
  363.           }
  364.  
  365.           // scroll content
  366.           me.scrollTop(delta);
  367.  
  368.           // fire scrolling event
  369.           me.trigger('slimscrolling', ~~delta);
  370.  
  371.           // ensure bar is visible
  372.           showBar();
  373.  
  374.           // trigger hide when scroll is stopped
  375.           hideBar();
  376.         }
  377.  
  378.         function attachWheel()
  379.         {
  380.           if (window.addEventListener)
  381.           {
  382.             this.addEventListener('DOMMouseScroll', _onWheel, false );
  383.             this.addEventListener('mousewheel', _onWheel, false );
  384.             this.addEventListener('MozMousePixelScroll', _onWheel, false );
  385.           }
  386.           else
  387.           {
  388.             document.attachEvent("onmousewheel", _onWheel)
  389.           }
  390.         }
  391.  
  392.         function getBarHeight()
  393.         {
  394.           // calculate scrollbar height and make sure it is not too small
  395.           barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
  396.           bar.css({ height: barHeight + 'px' });
  397.  
  398.           // hide scrollbar if content is not long enough
  399.           var display = barHeight == me.outerHeight() ? 'none' : 'block';
  400.           bar.css({ display: display });
  401.         }
  402.  
  403.         function showBar()
  404.         {
  405.           // recalculate bar height
  406.           getBarHeight();
  407.           clearTimeout(queueHide);
  408.  
  409.           // when bar reached top or bottom
  410.           if (percentScroll == ~~percentScroll)
  411.           {
  412.             //release wheel
  413.             releaseScroll = o.allowPageScroll;
  414.  
  415.             // publish approporiate event
  416.             if (lastScroll != percentScroll)
  417.             {
  418.                 var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
  419.                 me.trigger('slimscroll', msg);
  420.             }
  421.           }
  422.           else
  423.           {
  424.             releaseScroll = false;
  425.           }
  426.           lastScroll = percentScroll;
  427.  
  428.           // show only when required
  429.           if(barHeight >= me.outerHeight()) {
  430.             //allow window scroll
  431.             releaseScroll = true;
  432.             return;
  433.           }
  434.           bar.stop(true,true).fadeIn('fast');
  435.           if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
  436.         }
  437.  
  438.         function hideBar()
  439.         {
  440.           // only hide when options allow it
  441.           if (!o.alwaysVisible)
  442.           {
  443.             queueHide = setTimeout(function(){
  444.               if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
  445.               {
  446.                 bar.fadeOut('slow');
  447.                 rail.fadeOut('slow');
  448.               }
  449.             }, 1000);
  450.           }
  451.         }
  452.  
  453.       });
  454.  
  455.       // maintain chainability
  456.       return this;
  457.     }
  458.   });
  459.  
  460.   jQuery.fn.extend({
  461.     slimscroll: jQuery.fn.slimScroll
  462.   });
  463.  
  464. })(jQuery);

Raw Paste


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