<style type="text/css">
.scrollBar {
width: 10px;
background-color: #daa520;
position: absolute;
top: 1px;
right: 1px;
display: block;
border-radius: 6px;
z-index:;
} .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"><br/>
ScrollBar<br/>
ScrollBar<br/>
ScrollBar<br/> ScrollBar<br/>
ScrollBar<br/>
ScrollBar<br/>
ScrollBar<br/>
ScrollBar<br/>
ScrollBar<br/><br/> </div>
JavaScript
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var ScrollBar = function(options) {
var defaults = {
barClass:'scrollBar',
barHoverClass: 'scrollBarHover',
barActiveClass: 'scrollBarActive',
barContent: null
},
doc = document,
utils = {
hide: function (obj) {
obj.style.display = 'none';
},
show :function(obj) {
obj.style.display = 'block';
},
isShow : function(c) {
return c.style["display"] === "none" ? !1 : !0
},
hasClassName: function(element, className) {
var elementClassName = element.className;
return (elementClassName.length > 0 && (elementClassName == className ||
new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
},
addClassName: function(element, className) {
if (!utils.hasClassName(element, className))
element.className += (element.className ? ' ' : '') + className;
return element;
},
removeClassName: function(element, className) {
element.className = element.className.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
return element;
},
getCurrentStyle : function(el) {
if (el.currentStyle) {
return el.currentStyle;
} else if (window.getComputedStyle) {
return getComputedStyle(el, null);
}
return null;
},
extend :function() {
var args = Array.prototype.slice.call(arguments);
if (args.length == 1)
args.unshift({});
for (var name in args[1]) {
if (args[1].hasOwnProperty(name)) {
args[0][name] = args[1][name];
}
}
return args[0];
},
bind: function(target, type, call) {
if (target.addEventListener) {
target.addEventListener(type, call, 0);
} else if (target.attachEvent) {
target.attachEvent('on' + type, call);
} else {
target['on' + type] = call;
}
},
unbind: function(target, type) {
if (target.removeEventListener) {
target.removeEventListener(type);
} else if (target.detachEvent) {
target.detachEvent('on' + type);
} else {
target['on' + type] = null;
}
}
};
options = utils.extend(defaults, options || {});
utils.extend(this, {
utils : utils,
bar : doc.createElement('div'),
content : options.barContent,
init: function() {
this.bar.className = options.barClass || 'scrollBar';
this.content = options.barContent;
this.content.appendChild(this.bar);
var el = doc.createElement('div'),style = utils.getCurrentStyle(this.content);
el.style.cssText = 'overflow: hidden; position: relative;padding:2px; width:' + style.width + '; height: ' + style.height + ';';
var contentParent = this.content.parentNode;
el.appendChild(this.content);
el.appendChild(this.bar);
contentParent.appendChild(el);
this.wheelThread = 20;
this.isScrolling = !1;
this.setBarHeight();
var self = this;
var events = {
onMouseDown: function(e) {
e = e || window.event;
var target = e.currentTarget || e.srcElement;
target.style.cursor = 'default';
self.bar.y = e.clientY;
self.bar.t = parseInt(self.bar.style.marginTop);
self.isScrolling = 1;
options.barActiveClass && utils.addClassName(self.bar, options.barActiveClass);
},
onMouseMove: function(e) {
e = e || window.event;
var isClickButton = (e.button === 1 || e.button === 0);
if (self.isScrolling && isClickButton) {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
self.scroll(e.clientY - self.bar.y);
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
}
},
onMouseUp: function() {
if (self.isScrolling) {
self.isScrolling = 0;
options.barActiveClass && utils.removeClassName(self.bar, options.barActiveClass);
}
},
onMouseOver: function() {
options.barHoverClass && utils.addClassName(self.bar, options.barHoverClass)
},
onMouseOut: function() {
utils.removeClassName(self.bar, options.barHoverClass)
},
onMouseWheel: function(e) {
e = e || window.event;
if (utils.isShow(self.bar)) {
self.D = e.wheelDelta;
e.returnValue = !1;
var d = self.D < 0 ? self.wheelThread : 0 - self.wheelThread;
self.bar.y = e.clientY;
self.bar.t = parseInt(self.bar.style.marginTop);
self.scroll(d)
} else
self.scrollToBottom(e)
},
onClick: function(e) {
e.stopPropagation && e.stopPropagation()
},
onDomMouseScroll: function(e) {
if (utils.isShow(self.bar)) {
self.D = e.detail > 0 ? -1 : 1;
e.stopPropagation && e.stopPropagation();
e.preventDefault && e.preventDefault();
self.bar.y = e.clientY;
self.bar.t = parseInt(self.bar.style.marginTop);
self.scroll(self.D < 0 ? self.wheelThread : 0 - self.wheelThread);
} else {
self.scrollToBottom(e)
}
}
}
utils.bind(this.bar, 'mousedown', events.onMouseDown);
utils.bind(doc, 'mousemove', events.onMouseMove);
utils.bind(this.bar, 'mouseout', events.onMouseOut);
utils.bind(this.bar, 'mouseover', events.onMouseOver);
utils.bind(doc, 'mouseup', events.onMouseUp);
utils.bind(this.content, 'mousewheel', events.onMouseWheel);
utils.bind(this.content, 'dommousescroll', events.onDomMouseScroll);
},
onscroll : doc.onscroll || function() {
},
scrollToBottom : doc.scrollToBottom || function() {
},
scroll: function(b) {
this.marginTop = (this.bar.t || 0) + b;
if (this.marginTop < 0)
this.marginTop = 0;
if (this.marginTop > this.content.clientHeight - this.bar.offsetHeight)
this.marginTop = this.content.clientHeight - this.bar.offsetHeight,this.scrollToBottom();
this.bar.style.marginTop = this.marginTop + "px";
if (b == 0)
this.onscroll(b, b);
var a = (this.content.scrollHeight -
this.content.offsetHeight) * parseInt(this.marginTop) / (this.content.offsetHeight - this.bar.offsetHeight);
this.content.scrollTop = a;
this.onscroll(a, b)
},
setBarHeight: function() {
this.onscroll(0, 0);
this.bar.style.height = "0";
this.utils.hide(this.bar);
this.content.offsetHeight - this.content.scrollHeight >= 0 ? (this.bar.t = 0) : (this.bar.style.height = parseInt(this.content.offsetHeight /
this.content.scrollHeight * this.content.offsetHeight) + "px",this.utils.show(this.bar),this.bar.t = parseInt(this.bar.style.marginTop));
this.scroll(0);
}
});
}
var scroll = new ScrollBar({
barContent: $('text_div')
});
scroll.init();
</script>