DIV模拟滚动条

一个简单的模拟滚动条效果，没有做很精细的处理，当是学习JS的一个笔记吧。之前没有写博客的习惯，发现果然不知道如何写一篇好的文章了，看来今后得每日一记啦。

效果预览：

22222222222222222
ScrollBar
ScrollBar
ScrollBar
ScrollBar
ScrollBar
ScrollBar
ScrollBar
ScrollBar
ScrollBar
1111111111111111111111

CSS:

<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：

View Code

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

转载于:https://www.cnblogs.com/darkli/archive/2012/02/15/2352744.html