标签：
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>
标签：
原文地址：http://www.cnblogs.com/ws-zhangbo/p/5627719.html
