https://kaz-type.com/js/jquery.slimscroll.js

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