div自定义的滚动条 （竖直导航条）

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