1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style>
6 div{
7 /* width:800px;*/
8 height:200px;
9 border:1px solid #ddd;
10 overflow: hidden;
11 /*white-space:nowrap; */
12 }
13 /*div::-webkit-scrollbar-track
14 {
15 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
16 border-radius: 10px;
17 background-color: #F5F5F5;
18 }
19
20 div::-webkit-scrollbar
21 {
22 width: 12px;
23 background-color: #F5F5F5;
24 margin-bottom:100px;
25 }
26
27 div::-webkit-scrollbar-thumb
28 {
29 border-radius: 10px;
30 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
31 background-color: #555;
32 }*/
33 .scrollBar {
34 width: 30px !important;
35 height:10px !important;
36 background-color: #daa520;
37 position: absolute;
38 top: 200px;
39 left: 0px;
40 display: block;
41 border-radius: 6px;
42 z-index: 10;
43 }
44
45 .scrollBarHover {
46 background-color: #b8860b;
47 }
48
49 .scrollBarActive {
50 background-color: #ff8c00;
51 }
52
53 .scrollContent {
54 width: 600px;
55 height: 600px;
56 border: 1px solid #808080;
57 overflow: hidden;
58 white-space: nowrap;
59 }
60 tr{
61
62 height:30px;
63 }
64 td{
65 width:200px;
66 border:1px solid #ddd;
67 }
68 table{
69
70 border-collapse: collapse;
71 table-layout:fixed;
72 }
73 </style>
74 </head>
75 <body>
76 <div id="text_div" class="scrollContent">
77 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
78 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
79 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
80 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
81 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
82 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
83 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
84 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
85 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
86 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
87 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
88 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
89 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
90 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
91 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
92 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
93 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
94 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
95 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
96 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
97 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
98 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
99 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
100 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
101 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
102 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
103 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
104 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
105 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
106 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
107 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
108 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
109 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
110 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
111 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 ←
113 <table>
114 <caption>table title and/or explanatory text</caption>
115 <thead>
116 <tr>
117 <th>header</th>
118 </tr>
119 </thead>
120 <tbody>
121 <tr>
122 <td>data Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
123 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
124 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
125 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
126 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
127 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
128 </tr><tr>
129 <td>data</td>
130 </tr><tr>
131 <td>data</td>
132 </tr><tr>
133 <td>data</td>
134 </tr><tr>
135 <td>data</td>
136 </tr><tr>
137 <td>data</td>
138 </tr><tr>
139 <td>data</td>
140 </tr><tr>
141 <td>data</td>
142 </tr>
143 </tbody>
144 </table>
145 </div>
146 <script type="text/javascript">
147
148
149 function $(id) {
150 return document.getElementById(id);
151 }
152
153 var ScrollBar = function(options) {
154 var defaults = {
155 barClass:'scrollBar',
156 barHoverClass: 'scrollBarHover',
157 barActiveClass: 'scrollBarActive',
158 barContent: null
159 },
160 doc = document,
161 utils = {
162 hide: function (obj) {
163 obj.style.display = 'none';
164 },
165 show :function(obj) {
166 obj.style.display = 'block';
167 },
168 isShow : function(c) {
169 return c.style["display"] === "none" ? !1 : !0
170 },
171 hasClassName: function(element, className) {
172
173 var elementClassName = element.className;
174 return (elementClassName.length > 0 && (elementClassName == className ||
175 new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
176 },
177 addClassName: function(element, className) {
178
179 if (!utils.hasClassName(element, className))
180 element.className += (element.className ? ' ' : '') + className;
181 return element;
182 },
183
184 removeClassName: function(element, className) {
185
186 element.className = element.className.replace(
187 new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
188 return element;
189 },
190 getCurrentStyle : function(el) {
191 if (el.currentStyle) {
192 return el.currentStyle;
193 } else if (window.getComputedStyle) {
194 return getComputedStyle(el, null);
195 }
196 return null;
197 },
198 extend :function() {
199 var args = Array.prototype.slice.call(arguments);
200 if (args.length == 1)
201 args.unshift({});
202 for (var name in args[1]) {
203 if (args[1].hasOwnProperty(name)) {
204 args[0][name] = args[1][name];
205 }
206 }
207 return args[0];
208 },
209 bind: function(target, type, call) {
210 if (target.addEventListener) {
211 target.addEventListener(type, call, 0);
212 } else if (target.attachEvent) {
213 target.attachEvent('on' + type, call);
214 } else {
215 target['on' + type] = call;
216 }
217 },
218 unbind: function(target, type) {
219 if (target.removeEventListener) {
220 target.removeEventListener(type);
221 } else if (target.detachEvent) {
222 target.detachEvent('on' + type);
223 } else {
224 target['on' + type] = null;
225 }
226 }
227 };
228
229 options = utils.extend(defaults, options || {});
230
231 utils.extend(this, {
232 utils : utils,
233 bar : doc.createElement('div'),
234 content : options.barContent,
235 init: function() {
236 this.bar.className = options.barClass || 'scrollBar';
237 this.content = options.barContent;
238
239 this.content.appendChild(this.bar);
240
241 var el = doc.createElement('div'),style = utils.getCurrentStyle(this.content);
242
243 el.style.cssText = 'overflow: hidden; position: relative;padding:2px; width:' + style.width + '; height: ' + style.height + ';';
244 var contentParent = this.content.parentNode;
245
246 el.appendChild(this.content);
247 el.appendChild(this.bar);
248 contentParent.appendChild(el);
249
250 this.wheelThread = 20;
251 this.isScrolling = !1;
252 this.setBarHeight();
253 var self = this;
254 var events = {
255 onMouseDown: function(e) {
256 e = e || window.event;
257 var target = e.currentTarget || e.srcElement;
258 target.style.cursor = 'default';
259 self.bar.x = e.clientX;
260 self.bar.t = parseInt(self.bar.style.marginLeft);
261 self.isScrolling = 1;
262
263 options.barActiveClass && utils.addClassName(self.bar, options.barActiveClass);
264 },
265 onMouseMove: function(e) {
266 e = e || window.event;
267 var isClickButton = (e.button === 1 || e.button === 0);
268 if (self.isScrolling && isClickButton) {
269 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
270 self.scroll(e.clientX - self.bar.x);
271 e.preventDefault && e.preventDefault();
272 e.stopPropagation && e.stopPropagation();
273 }
274 },
275 onMouseUp: function() {
276
277 if (self.isScrolling) {
278 self.isScrolling = 0;
279
280 options.barActiveClass && utils.removeClassName(self.bar, options.barActiveClass);
281 }
282 },
283 onMouseOver: function() {
284
285 options.barHoverClass && utils.addClassName(self.bar, options.barHoverClass)
286 },
287 onMouseOut: function() {
288 utils.removeClassName(self.bar, options.barHoverClass)
289 },
290 onMouseWheel: function(e) {
291 e = e || window.event;
292 if (utils.isShow(self.bar)) {
293 self.D = e.wheelDelta;
294 e.returnValue = !1;
295 var d = self.D < 0 ? self.wheelThread : 0 - self.wheelThread;
296 self.bar.x = e.clientX;
297 self.bar.t = parseInt(self.bar.style.marginLeft);
298 self.scroll(d)
299 } else{
300 self.scrollToBottom(e)
301 }
302 },
303 onClick: function(e) {
304 e.stopPropagation && e.stopPropagation()
305 },
306 onDomMouseScroll: function(e) {
307 if (utils.isShow(self.bar)) {
308 self.D = e.detail > 0 ? -1 : 1;
309 e.stopPropagation && e.stopPropagation();
310 e.preventDefault && e.preventDefault();
311 self.bar.x = e.clientX;
312 self.bar.t = parseInt(self.bar.style.marginLeft);
313 self.scroll(self.D < 0 ? self.wheelThread : 0 - self.wheelThread);
314
315 } else {
316 self.scrollToBottom(e)
317 }
318 }
319 }
320
321 utils.bind(this.bar, 'mousedown', events.onMouseDown);
322 utils.bind(doc, 'mousemove', events.onMouseMove);
323 utils.bind(this.bar, 'mouseout', events.onMouseOut);
324 utils.bind(this.bar, 'mouseover', events.onMouseOver);
325 utils.bind(doc, 'mouseup', events.onMouseUp);
326 utils.bind(this.content, 'mousewheel', events.onMouseWheel);
327 utils.bind(this.content, 'dommousescroll', events.onDomMouseScroll);
328
329 },
330 onscroll : doc.onscroll || function() {
331 },
332 scrollToBottom : doc.scrollToBottom || function() {
333 },
334 scroll: function(b) {
335
336 this.marginLeft = (this.bar.t || 0) + b;
337 if (this.marginLeft < 0)
338 this.marginLeft = 0;
339 if (this.marginLeft > this.content.clientWidth - this.bar.clientWidth)
340 this.marginLeft = this.content.clientWidth - this.bar.clientWidth,this.scrollToBottom();
341 this.bar.style.marginLeft = this.marginLeft + "px";
342 if (b == 0)
343 this.onscroll(b, b);
344 var a = (this.content.scrollWidth -
345 this.content.clientWidth) * parseInt(this.marginLeft) / (this.content.clientWidth - this.bar.clientWidth);
346
347 this.content.scrollLeft = a;
348
349 this.onscroll(a, b)
350 },
351 setBarHeight: function() {
352 this.onscroll(0, 0);
353 this.bar.style.width = "0";
354 this.utils.hide(this.bar);
355
356 this.content.offsetWidth - this.content.scrollWidth >= 0 ? (this.bar.t = 0) : (this.bar.style.width = parseInt(this.content.offsetWidth / this.content.scrollWidth * this.content.offsetWidth) + "px",this.utils.show(this.bar),this.bar.t = parseInt(this.bar.style.marginLeft));
357 this.scroll(0);
358 }
359 });
360
361
362 }
363
364 var scroll = new ScrollBar({
365 barContent: $('text_div')
366 });
367 scroll.init();
368
369 </script>
370 </body>
371 </html>
