https://www.criquiers.fr/js/jquery.tinyscrollbar.js

1;(function (factory)
2{
3    if (typeof define === 'function' && define.amd)
4    {
5        define(['jquery'], factory);
6    }
7    else if (typeof exports === 'object')
8    {
9        factory(require('jquery'));
10    }
11    else
12    {
13        factory(jQuery);
14    }
15}
16(function ($)
17{
18    "use strict";
19
20    var pluginName = "tinyscrollbar"
21    ,   defaults   =
22        {
23            axis         : 'y'    // Vertical or horizontal scrollbar? ( x || y ).
24        ,   wheel        : true   // Enable or disable the mousewheel;
25        ,   wheelSpeed   : 40     // How many pixels must the mouswheel scroll at a time.
26        ,   wheelLock    : true   // Lock default scrolling window when there is no more content.
27        ,   scrollInvert : false  // Enable invert style scrolling
28        ,   trackSize    : false  // Set the size of the scrollbar to auto or a fixed number.
29        ,   thumbSize    : false  // Set the size of the thumb to auto or a fixed number
30        }
31    ;
32
33    function Plugin($container, options)
34    {
35        this.options   = $.extend({}, defaults, options);
36        this._defaults = defaults;
37        this._name     = pluginName;
38
39        var self        = this
40        ,   $viewport   = $container.find(".viewport")
41        ,   $overview   = $container.find(".overview")
42        ,   $scrollbar  = $container.find(".scrollbar")
43        ,   $track      = $scrollbar.find(".track")
44        ,   $thumb      = $scrollbar.find(".thumb")
45
46        ,   mousePosition  = 0
47
48        ,   isHorizontal   = this.options.axis === 'x'
49        ,   hasTouchEvents = ("ontouchstart" in document.documentElement)
50        ,   wheelEvent     = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
51                             document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
52                             "DOMMouseScroll" // let's assume that remaining browsers are older Firefox
53
54        ,   sizeLabel = isHorizontal ? "width" : "height"
55        ,   posiLabel = isHorizontal ? "left" : "top"
56        ;
57
58        this.contentPosition = 0;
59        this.viewportSize    = 0;
60        this.contentSize     = 0;
61        this.contentRatio    = 0;
62        this.trackSize       = 0;
63        this.trackRatio      = 0;
64        this.thumbSize       = 0;
65        this.thumbPosition   = 0;
66
67        function initialize()
68        {
69            self.update();
70            setEvents();
71
72            return self;
73        }
74
75        this.update = function(scrollTo)
76        {
77            var sizeLabelCap  = sizeLabel.charAt(0).toUpperCase() + sizeLabel.slice(1).toLowerCase();
78            this.viewportSize = $viewport[0]['offset'+ sizeLabelCap];
79            this.contentSize  = $overview[0]['scroll'+ sizeLabelCap];
80            this.contentRatio = this.viewportSize / this.contentSize;
81            this.trackSize    = this.options.trackSize || this.viewportSize;
82            this.thumbSize    = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio))));
83            this.trackRatio   = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize);
84            mousePosition     = $track.offset().top;
85
86            $scrollbar.toggleClass("disable", this.contentRatio >= 1);
87            switch (scrollTo)
88            {
89                case "bottom":
90                    this.contentPosition = Math.max(this.contentSize - this.viewportSize, 0);
91                    break;
92
93                case "relative":
94                    this.contentPosition = Math.min(Math.max(this.contentSize - this.viewportSize, 0), Math.max(0, this.contentPosition));
95                    break;
96
97                default:
98                    this.contentPosition = parseInt(scrollTo, 10) || 0;
99            }
100
101            setSize();
102
103            return self;
104        };
105
106        function setSize()
107        {
108            $thumb.css(posiLabel, self.contentPosition / self.trackRatio);
109            $overview.css(posiLabel, -self.contentPosition);
110            $scrollbar.css(sizeLabel, self.trackSize);
111            $track.css(sizeLabel, self.trackSize);
112            $thumb.css(sizeLabel, self.thumbSize);
113        }
114
115        function setEvents()
116        {
117            if(hasTouchEvents)
118            {
119                $viewport[0].ontouchstart = function(event)
120                {
121                    if(1 === event.touches.length)
122                    {
123                        event.stopPropagation();
124
125                        start(event.touches[0]);
126                    }
127                };
128            }
129            else
130            {
131                $thumb.bind("mousedown", start);
132                $track.bind("mousedown", drag);
133            }
134
135            $(window).resize(function()
136            {
137                self.update("relative");
138            });
139
140            if(self.options.wheel && window.addEventListener)
141            {
142                $container[0].addEventListener(wheelEvent, wheel, false );
143            }
144            else if(self.options.wheel)
145            {
146                $container[0].onmousewheel = wheel;
147            }
148        }
149
150        function start(event)
151        {
152            $("body").addClass("noSelect");
153
154            mousePosition      = isHorizontal ? event.pageX : event.pageY;
155            self.thumbPosition = parseInt($thumb.css(posiLabel), 10) || 0;
156
157            if(hasTouchEvents)
158            {
159                document.ontouchmove = function(event)
160                {
161                    event.preventDefault();
162                    drag(event.touches[0]);
163                };
164                document.ontouchend = end;
165            }
166            else
167            {
168                $(document).bind("mousemove", drag);
169                $(document).bind("mouseup", end);
170                $thumb.bind("mouseup", end);
171            }
172        }
173
174        function wheel(event)
175        {
176            if(self.contentRatio < 1)
177            {
178                var evntObj         = event || window.event
179                ,   wheelSpeedDelta = -(evntObj.deltaY || evntObj.detail || (-1 / 3 * evntObj.wheelDelta)) / 40
180                ,   multiply        = (evntObj.deltaMode === 1) ? self.options.wheelSpeed : 1
181                ;
182
183                self.contentPosition -= wheelSpeedDelta * multiply * self.options.wheelSpeed;
184                self.contentPosition = Math.min((self.contentSize - self.viewportSize), Math.max(0, self.contentPosition));
185
186                $container.trigger("move");
187
188                $thumb.css(posiLabel, self.contentPosition / self.trackRatio);
189                $overview.css(posiLabel, -self.contentPosition);
190
191                if(self.options.wheelLock || (self.contentPosition !== (self.contentSize - self.viewportSize) && self.contentPosition !== 0))
192                {
193                    evntObj = $.event.fix(evntObj);
194                    evntObj.preventDefault();
195                }
196            }
197        }
198
199        function drag(event)
200        {
201            if(self.contentRatio < 1)
202            {
203                var mousePositionNew   = isHorizontal ? event.pageX : event.pageY
204                ,   thumbPositionDelta = mousePositionNew - mousePosition
205                ;
206
207                if(self.options.scrollInvert && hasTouchEvents)
208                {
209                    thumbPositionDelta = mousePosition - mousePositionNew;
210                }
211
212                var thumbPositionNew = Math.min((self.trackSize - self.thumbSize), Math.max(0, self.thumbPosition + thumbPositionDelta));
213                self.contentPosition = thumbPositionNew * self.trackRatio;
214
215                $container.trigger("move");
216
217                $thumb.css(posiLabel, thumbPositionNew);
218                $overview.css(posiLabel, -self.contentPosition);
219            }
220        }
221
222        function end()
223        {
224            $("body").removeClass("noSelect");
225            $(document).unbind("mousemove", drag);
226            $(document).unbind("mouseup", end);
227            $thumb.unbind("mouseup", end);
228            document.ontouchmove = document.ontouchend = null;
229        }
230
231        return initialize();
232    }
233
234    $.fn[pluginName] = function(options)
235    {
236        return this.each(function()
237        {
238            if(!$.data(this, "plugin_" + pluginName))
239            {
240                $.data(this, "plugin_" + pluginName, new Plugin($(this), options));
241            }
242        });
243    };
244}));