div自定义的滚动条 （竖直导航条）
Posted 蛋Mrs炒饭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div自定义的滚动条 （竖直导航条）相关的知识，希望对你有一定的参考价值。
<style type="text/css"> .scrollBar { width: 10px; background-color: #daa520; position: absolute; top: 1px; right: 1px; display: block; border-radius: 6px; z-index: 10; } .scrollBarHover { background-color: #b8860b; } .scrollBarActive { background-color: #ff8c00; } .scrollContent { width: 300px; height: 100px; border: 1px solid #808080; overflow: hidden; } </style>
HTML
<div id="text_div" class="scrollContent"> 22222222222222222<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> ScrollBar<br/> 1111111111111111111111<br/> </div>
1 <script type="text/javascript"> 2 3 4 function $(id) { 5 return document.getElementById(id); 6 } 7 8 var ScrollBar = function(options) { 9 var defaults = { 10 barClass:\'scrollBar\', 11 barHoverClass: \'scrollBarHover\', 12 barActiveClass: \'scrollBarActive\', 13 barContent: null 14 }, 15 doc = document, 16 utils = { 17 hide: function (obj) { 18 obj.style.display = \'none\'; 19 }, 20 show :function(obj) { 21 obj.style.display = \'block\'; 22 }, 23 isShow : function(c) { 24 return c.style["display"] === "none" ? !1 : !0 25 }, 26 hasClassName: function(element, className) { 27 28 var elementClassName = element.className; 29 return (elementClassName.length > 0 && (elementClassName == className || 30 new RegExp("(^|\\\\s)" + className + "(\\\\s|$)").test(elementClassName))); 31 }, 32 addClassName: function(element, className) { 33 34 if (!utils.hasClassName(element, className)) 35 element.className += (element.className ? \' \' : \'\') + className; 36 return element; 37 }, 38 39 removeClassName: function(element, className) { 40 41 element.className = element.className.replace( 42 new RegExp("(^|\\\\s+)" + className + "(\\\\s+|$)"), \' \'); 43 return element; 44 }, 45 getCurrentStyle : function(el) { 46 if (el.currentStyle) { 47 return el.currentStyle; 48 } else if (window.getComputedStyle) { 49 return getComputedStyle(el, null); 50 } 51 return null; 52 }, 53 extend :function() { 54 var args = Array.prototype.slice.call(arguments); 55 if (args.length == 1) 56 args.unshift({}); 57 for (var name in args[1]) { 58 if (args[1].hasOwnProperty(name)) { 59 args[0][name] = args[1][name]; 60 } 61 } 62 return args[0]; 63 }, 64 bind: function(target, type, call) { 65 if (target.addEventListener) { 66 target.addEventListener(type, call, 0); 67 } else if (target.attachEvent) { 68 target.attachEvent(\'on\' + type, call); 69 } else { 70 target[\'on\' + type] = call; 71 } 72 }, 73 unbind: function(target, type) { 74 if (target.removeEventListener) { 75 target.removeEventListener(type); 76 } else if (target.detachEvent) { 77 target.detachEvent(\'on\' + type); 78 } else { 79 target[\'on\' + type] = null; 80 } 81 } 82 }; 83 84 options = utils.extend(defaults, options || {}); 85 86 utils.extend(this, { 87 utils : utils, 88 bar : doc.createElement(\'div\'), 89 content : options.barContent, 90 init: function() { 91 this.bar.className = options.barClass || \'scrollBar\'; 92 this.content = options.barContent; 93 94 this.content.appendChild(this.bar); 95 96 var el = doc.createElement(\'div\'),style = utils.getCurrentStyle(this.content); 97 98 el.style.cssText = \'overflow: hidden; position: relative;padding:2px; width:\' + style.width + \'; height: \' + style.height + \';\'; 99 var contentParent = this.content.parentNode; 100 101 el.appendChild(this.content); 102 el.appendChild(this.bar); 103 contentParent.appendChild(el); 104 105 this.wheelThread = 20; 106 this.isScrolling = !1; 107 this.setBarHeight(); 108 var self = this; 109 var events = { 110 onMouseDown: function(e) { 111 e = e || window.event; 112 var target = e.currentTarget || e.srcElement; 113 target.style.cursor = \'default\'; 114 self.bar.y = e.clientY; 115 self.bar.t = parseInt(self.bar.style.marginTop); 116 self.isScrolling = 1; 117 118 options.barActiveClass && utils.addClassName(self.bar, options.barActiveClass); 119 }, 120 onMouseMove: function(e) { 121 e = e || window.event; 122 var isClickButton = (e.button === 1 || e.button === 0); 123 if (self.isScrolling && isClickButton) { 124 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 125 self.scroll(e.clientY - self.bar.y); 126 e.preventDefault && e.preventDefault(); 127 e.stopPropagation && e.stopPropagation(); 128 } 129 }, 130 onMouseUp: function() { 131 132 if (self.isScrolling) { 133 self.isScrolling = 0; 134 135 options.barActiveClass && utils.removeClassName(self.bar, options.barActiveClass); 136 } 137 }, 138 onMouseOver: function() { 139 140 options.barHoverClass && utils.addClassName(self.bar, options.barHoverClass) 141 }, 142 onMouseOut: function() { 143 utils.removeClassName(self.bar, options.barHoverClass) 144 }, 145 onMouseWheel: function(e) { 146 e = e || window.event; 147 if (utils.isShow(self.bar)) { 148 self.D = e.wheelDelta; 149 e.returnValue = !1; 150 var d = self.D < 0 ? self.wheelThread : 0 - self.wheelThread; 151 self.bar.y = e.clientY; 152 self.bar.t = parseInt(self.bar.style.marginTop); 153 self.scroll(d) 154 } else 155 self.scrollToBottom(e) 156 }, 157 onClick: function(e) { 158 e.stopPropagation && e.stopPropagation() 159 }, 160 onDomMouseScroll: function(e) { 161 if (utils.isShow(self.bar)) { 162 self.D = e.detail > 0 ? -1 : 1; 163 e.stopPropagation && e.stopPropagation(); 164 e.preventDefault && e.preventDefault(); 165 self.bar.y = e.clientY; 166 self.bar.t = parseInt(self.bar.style.marginTop); 167 self.scroll(self.D < 0 ? self.wheelThread : 0 - self.wheelThread); 168 169 } else { 170 self.scrollToBottom(e) 171 } 172 } 173 } 174 175 utils.bind(this.bar, \'mousedown\', events.onMouseDown); 176 utils.bind(doc, \'mousemove\', events.onMouseMove); 177 utils.bind(this.bar, \'mouseout\', events.onMouseOut); 178 utils.bind(this.bar, \'mouseover\', events.onMouseOver); 179 utils.bind(doc, \'mouseup\', events.onMouseUp); 180 utils.bind(this.content, \'mousewheel\', events.onMouseWheel); 181 utils.bind(this.content, \'dommousescroll\', events.onDomMouseScroll); 182 183 }, 184 onscroll : doc.onscroll || function() { 185 }, 186 scrollToBottom : doc.scrollToBottom || function() { 187 }, 188 scroll: function(b) { 189 190 this.marginTop = (this.bar.t || 0) + b; 191 if (this.marginTop < 0) 192 this.marginTop = 0; 193 if (this.marginTop > this.content.clientHeight - this.bar.offsetHeight) 194 this.marginTop = this.content.clientHeight - this.bar.offsetHeight,this.scrollToBottom(); 195 this.bar.style.marginTop = this.marginTop + "px"; 196 if (b == 0) 197 this.onscroll(b, b); 198 var a = (this.content.scrollHeight - 199 this.content.offsetHeight) * parseInt(this.marginTop) / (this.content.offsetHeight - this.bar.offsetHeight); 200 201 this.content.scrollTop = a; 202 203 this.onscroll(a, b) 204 }, 205 setBarHeight: function() { 206 this.onscroll(0, 0); 207 this.bar.style.height = "0"; 208 this.utils.hide(this.bar); 209 210 this.content.offsetHeight - this.content.scrollHeight >= 0 ? (this.bar.t = 0) : (this.bar.style.height = parseInt(this.content.offsetHeight / 211 this.content.scrollHeight * this.content.offsetHeight) + "px",this.utils.show(this.bar),this.bar.t = parseInt(this.bar.style.marginTop)); 212 this.scroll(0); 213 } 214 }); 215 216 217 } 218 219 var scroll = new ScrollBar({ 220 barContent: $(\'text_div\') 221 }); 222 scroll.init(); 223 224 </script>
以上是关于div自定义的滚动条 （竖直导航条）的主要内容，如果未能解决你的问题，请参考以下文章