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>

JavaScript

  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>
View Code

 

posted @ 2016-06-29 17:44  蛋Mrs炒饭  阅读(259)  评论(0)  编辑  收藏  举报