<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>
时间： 2024-10-10 19:49:05