|
11 | 11 | slimScroll: function(o) { |
12 | 12 |
|
13 | 13 | var ops = o; |
14 | | - //do it for every element that matches selector |
| 14 | + // do it for every element that matches selector |
15 | 15 | this.each(function(){ |
16 | 16 |
|
17 | 17 | var isOverPanel, isOverBar, isDragg, queueHide, barHeight, |
|
33 | 33 | railColor = o.railColor || '#333', |
34 | 34 | railOpacity = o.railOpacity || 0.2; |
35 | 35 |
|
36 | | - //used in event handlers and for better minification |
| 36 | + // used in event handlers and for better minification |
37 | 37 | var me = $(this); |
38 | 38 |
|
39 | | - //wrap content |
| 39 | + // wrap content |
40 | 40 | var wrapper = $(divS).css({ |
41 | 41 | position: 'relative', |
42 | 42 | overflow: 'hidden', |
43 | 43 | width: cwidth, |
44 | 44 | height: cheight |
45 | 45 | }).attr({ 'class': 'slimScrollDiv' }); |
46 | 46 |
|
47 | | - //update style for the div |
| 47 | + // update style for the div |
48 | 48 | me.css({ |
49 | 49 | overflow: 'hidden', |
50 | 50 | width: cwidth, |
51 | 51 | height: cheight |
52 | 52 | }); |
53 | 53 |
|
54 | | - //create scrollbar rail |
| 54 | + // create scrollbar rail |
55 | 55 | var rail = $(divS).css({ |
56 | 56 | width: size, |
57 | 57 | height: '100%', |
|
64 | 64 | zIndex: 90 |
65 | 65 | }); |
66 | 66 |
|
67 | | - //create scrollbar |
| 67 | + // create scrollbar |
68 | 68 | var bar = $(divS).attr({ |
69 | 69 | 'class': 'slimScrollBar ', |
70 | 70 | style: 'border-radius: ' + size |
|
81 | 81 | zIndex: 99 |
82 | 82 | }); |
83 | 83 |
|
84 | | - //set position |
| 84 | + // set position |
85 | 85 | var posCss = (position == 'right') ? { right: distance } : { left: distance }; |
86 | 86 | rail.css(posCss); |
87 | 87 | bar.css(posCss); |
88 | 88 |
|
89 | | - //wrap it |
| 89 | + // wrap it |
90 | 90 | me.wrap(wrapper); |
91 | 91 |
|
92 | | - //append to parent div |
| 92 | + // append to parent div |
93 | 93 | me.parent().append(bar); |
94 | 94 | me.parent().append(rail); |
95 | 95 |
|
96 | | - //make it draggable |
| 96 | + // make it draggable |
97 | 97 | bar.draggable({ |
98 | 98 | axis: 'y', |
99 | 99 | containment: 'parent', |
100 | 100 | start: function() { isDragg = true; }, |
101 | 101 | stop: function() { isDragg = false; hideBar(); }, |
102 | 102 | drag: function(e) |
103 | 103 | { |
104 | | - //scroll content |
| 104 | + // scroll content |
105 | 105 | scrollContent(0, $(this).position().top, false); |
106 | 106 | } |
107 | 107 | }); |
108 | 108 |
|
109 | | - //on rail over |
| 109 | + // on rail over |
110 | 110 | rail.hover(function(){ |
111 | 111 | showBar(); |
112 | 112 | }, function(){ |
113 | 113 | hideBar(); |
114 | 114 | }); |
115 | 115 |
|
116 | | - //on bar over |
| 116 | + // on bar over |
117 | 117 | bar.hover(function(){ |
118 | 118 | isOverBar = true; |
119 | 119 | }, function(){ |
120 | 120 | isOverBar = false; |
121 | 121 | }); |
122 | 122 |
|
123 | | - //show on parent mouseover |
| 123 | + // show on parent mouseover |
124 | 124 | me.hover(function(){ |
125 | 125 | isOverPanel = true; |
126 | 126 | showBar(); |
|
132 | 132 |
|
133 | 133 | var _onWheel = function(e) |
134 | 134 | { |
135 | | - //use mouse wheel only when mouse is over |
| 135 | + // use mouse wheel only when mouse is over |
136 | 136 | if (!isOverPanel) { return; } |
137 | 137 |
|
138 | 138 | var e = e || window.event; |
|
141 | 141 | if (e.wheelDelta) { delta = -e.wheelDelta/120; } |
142 | 142 | if (e.detail) { delta = e.detail / 3; } |
143 | 143 |
|
144 | | - //scroll content |
| 144 | + // scroll content |
145 | 145 | scrollContent(delta, true); |
146 | 146 |
|
147 | | - //stop window scroll |
| 147 | + // stop window scroll |
148 | 148 | if (e.preventDefault && !releaseScroll) { e.preventDefault(); } |
149 | 149 | if (!releaseScroll) { e.returnValue = false; } |
150 | 150 | } |
|
155 | 155 |
|
156 | 156 | if (isWheel) |
157 | 157 | { |
158 | | - //move bar with mouse wheel |
| 158 | + // move bar with mouse wheel |
159 | 159 | delta = bar.position().top + y * wheelStep; |
160 | 160 |
|
161 | | - //move bar, make sure it doesn't go out |
| 161 | + // move bar, make sure it doesn't go out |
162 | 162 | delta = Math.max(delta, 0); |
163 | 163 | var maxTop = me.outerHeight() - bar.outerHeight(); |
164 | 164 | delta = Math.min(delta, maxTop); |
165 | 165 |
|
166 | | - //scroll the scrollbar |
| 166 | + // scroll the scrollbar |
167 | 167 | bar.css({ top: delta + 'px' }); |
168 | 168 | } |
169 | 169 |
|
170 | | - //calculate actual scroll amount |
| 170 | + // calculate actual scroll amount |
171 | 171 | var percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight()); |
172 | 172 | delta = percentScroll * (me[0].scrollHeight - me.outerHeight()); |
173 | 173 |
|
|
178 | 178 | bar.css({ top: offsetTop + 'px' }); |
179 | 179 | } |
180 | 180 |
|
181 | | - //scroll content |
| 181 | + // scroll content |
182 | 182 | me.scrollTop(delta); |
183 | 183 |
|
184 | | - //ensure bar is visible |
| 184 | + // ensure bar is visible |
185 | 185 | showBar(); |
186 | 186 |
|
187 | 187 | // trigger hide when scroll is stopped |
|
201 | 201 | } |
202 | 202 | } |
203 | 203 |
|
204 | | - //attach scroll events |
| 204 | + // attach scroll events |
205 | 205 | attachWheel(); |
206 | 206 |
|
207 | 207 | var getBarHeight = function() |
208 | 208 | { |
209 | | - //calculate scrollbar height and make sure it is not too small |
| 209 | + // calculate scrollbar height and make sure it is not too small |
210 | 210 | barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight); |
211 | 211 | bar.css({ height: barHeight + 'px' }); |
212 | 212 | } |
213 | 213 |
|
214 | | - //set up initial height |
| 214 | + // set up initial height |
215 | 215 | getBarHeight(); |
216 | 216 |
|
217 | 217 | var showBar = function() |
218 | 218 | { |
219 | | - //recalculate bar height |
| 219 | + // recalculate bar height |
220 | 220 | getBarHeight(); |
221 | 221 | clearTimeout(queueHide); |
222 | 222 |
|
223 | | - //show only when required |
| 223 | + // show only when required |
224 | 224 | if(barHeight >= me.outerHeight()) { |
225 | | - //allow window scroll |
| 225 | + // allow window scroll |
226 | 226 | releaseScroll = true; |
227 | 227 | return; |
228 | 228 | } |
|
232 | 232 |
|
233 | 233 | var hideBar = function() |
234 | 234 | { |
235 | | - //only hide when options allow it |
| 235 | + // only hide when options allow it |
236 | 236 | if (!alwaysVisible) |
237 | 237 | { |
238 | 238 | queueHide = setTimeout(function(){ |
|
245 | 245 | } |
246 | 246 | } |
247 | 247 |
|
248 | | - //check start position |
| 248 | + // check start position |
249 | 249 | if (start == 'bottom') |
250 | 250 | { |
251 | | - //scroll content to bottom |
| 251 | + // scroll content to bottom |
252 | 252 | bar.css({ top: 'auto', bottom: 0 }); |
253 | 253 | scrollContent(0, true); |
254 | 254 | } |
255 | 255 | else if (typeof start == 'object') |
256 | 256 | { |
257 | | - //scroll content |
| 257 | + // scroll content |
258 | 258 | scrollContent($(start).position().top, null, true); |
259 | 259 |
|
260 | | - //make sure bar stays hidden |
| 260 | + // make sure bar stays hidden |
261 | 261 | if (!alwaysVisible) { bar.hide(); } |
262 | 262 | } |
263 | 263 | }); |
264 | 264 |
|
265 | | - //maintain chainability |
| 265 | + // maintain chainability |
266 | 266 | return this; |
267 | 267 | } |
268 | 268 | }); |
|
0 commit comments