div自定义的滚动条 （水平导航条）
Posted 蛋Mrs炒饭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div自定义的滚动条 （水平导航条）相关的知识，希望对你有一定的参考价值。
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.isScro以上是关于div自定义的滚动条 （水平导航条）的主要内容，如果未能解决你的问题，请参考以下文章