自定义滚动条插件

HTML结构：

<div class="styledSelect aaa">
    <div class="contentBox">
         .....这里是内容
    </div>
</div>

CSS：

<style>
　　　　/*最外层容器的样式*/
        .styledSelect {
            width: 410px;
            height: 295px;
            margin: 0 auto;
            overflow: hidden;
        }
　　　　　/*包裹内容的容器样式*/
        .contentBox {
            width: 400px;
            line-height: 20px;
            font-family: '宋体';
            font-size: 12px;
        }

        .contentBox p {
            text-indent: 24px;
            margin: 0;
            padding: 0;
        }
　　　　　/*这个是滑块的样式*/
        .barClass {
            right: 2px;
            width: 2px;
            background: #000;
        }
　　　　　/*这个是滑块靶的样式*/　
        .barSpanClass {
            width: 6px;
            background: #000;
            right: -2px;
        }
    </style>

js调用方式：

<script>
    //绑定滚动事件
    $('.aaa').StyleScroll();
    $('.bbb').StyleScroll();
    $('.ccc').StyleScroll();
</script>

js插件：

(function (window, $) {
    $.fn.StyleScroll = function () {
        var $self = $(this),
            contentbox = $self.children().first();
        $self.append('<div class="barline"></div>');
        var barline = $self.find('.barline');
        $self.find(barline).append('<span class="barSpan"></span>');
        var barSpan = $self.find('.barSpan');
        if ($self.css('position') !== 'relative') {
            $self.css('position', 'relative')
        }
        if (contentbox.css('position') !== 'absolute') {
            contentbox.css('position', 'absolute');
        }
        $('.barline').addClass('barClass');
        $('.barSpan').addClass('barSpanClass');

        var wrapHeight = $self.height();
        var contentheight = contentbox.outerHeight();
        var barSpanheight = parseInt(wrapHeight / contentheight * wrapHeight, 10);
        barline.css({'position': 'absolute', 'top': 0, 'height': wrapHeight + 'px'});
        barSpan.css({'position': 'absolute', 'top': 0, 'height': barSpanheight + 'px', 'cursor': 'pointer'});
        var scrollHeight = wrapHeight - barSpanheight;
        var nextval = 0;
        var barSpanTop;

        /*模拟的滚动事件*/
        $self.on('mousewheel DOMMouseScroll', contentbox, function (event) {
            var e = event || window.event;
            var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
            if (delta < 0 && nextval <= (contentheight - wrapHeight)) {
                nextval += 20;
            } else if (delta > 0 && nextval > 0) {
                nextval -= 20;
            }
            contentbox.css('top', -nextval + 'px');
            barSpanTop = nextval / contentheight * wrapHeight;
            barSpan.css('top', barSpanTop + 'px');
            _outFun(barSpanTop);
        });
        var t;

        /*拖动滚动靶事件*/
        barSpan.on('mousedown', function (event) {
            event.preventDefault();
            var e = event || window.event;
            t = e.clientY - barSpan.position().top;
            $(document).on('mousemove', function (event) {
                _dragFun(event);
                event.preventDefault();
            });
            $(document).on('mouseup', _mouseup);
            return false;
        });

        /*调用移入和移出时document的禁用状态*/
        $self.css('outline', 'none');
        $self.attr('hidefocus', true);
        $self.mouseenter(function () {
            scrollHanlder.disableScroll();
            //使div获取焦点
            $self.attr('tabindex', 1);
            $self.focus();
            $self.off('keydown').on('keydown', function (event) {
                var e = event || window.event;
                keyPress(event)
            });
        }).mouseleave(function () {
            scrollHanlder.enableScroll();
            //移除焦点
            $self.removeAttr('tabindex');
            $self.blur();
            $self.off('keydown');
        });

        function keyPress(event) {
            var e = event || window.event;
            var code = e.keyCode;
            if (code === 37 || code === 38 || code === 65 || code === 87 && nextval > 0) {
                if (nextval <= 0) {
                    return;
                } else {
                    nextval -= 20;
                }

            } else if (code === 39 || code === 40 || code === 68 || code === 83 && nextval <= (contentheight - wrapHeight)) {
                if (nextval >= (contentheight - wrapHeight)) {
                    return;
                } else {
                    nextval += 20;
                }
            }
            console.log(nextval);
            contentbox.css('top', -nextval + 'px');
            barSpanTop = nextval / contentheight * wrapHeight;
            barSpan.css('top', barSpanTop + 'px');
            _outFun(barSpanTop);
        }

        function _mouseup() {
            $(document).off('mousemove');
            $(document).off('mouseup');
            return false;
        }

        function _dragFun(event) {
            var e = event || window.event;
            var disY = e.clientY - t;
            var wt = disY / wrapHeight * contentheight;
            contentbox.css('top', -wt + 'px');
            barSpan.css('top', disY + 'px');
            _outFun(disY);
            return false;
        }

        function _outFun(barTop) {
            // 如果滚动条已经超出了内容的上方，停止
            if (barTop < 0) {
                disY = 0;
                barSpan.css('top', 0);
                contentbox.css('top', 0);
            }
            // 如果滚动条已经超出了内容的下方，停止
            if (barTop > scrollHeight) {
                disY = barTop;
                barSpan.css('top', scrollHeight + 'px');
                contentbox.css('top', -(contentheight - wrapHeight) + 'px');
            }
        }
    };
    /*禁用和开启document的滚动条*/

    var keys = {37: 1, 38: 1, 39: 1, 40: 1};

    function preventDefault(event) {
        e = event || window.event;
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.returnValue = false;
        return false;
    }

    function preventDefaultForScrollKeys(event) {
        var e = event || window.event;
        if (keys[e.keyCode]) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.returnValue = false;
            return false;
        }
    }

    var oldonmousewheel1, oldonmousewheel2, oldontouchmove, oldonkeydown, isDisabled;

    function disableScroll() {
        if (document.addEventListener) { // older FF
            document.addEventListener('DOMMouseScroll', preventDefault, false);
        }
        //oldonwheel = document.body.onwheel;
        //document.body.onwheel = preventDefault; // modern standard

        oldonmousewheel1 = window.onmousewheel;
        window.onmousewheel = preventDefault; // older browsers, IE
        oldonmousewheel2 = document.onmousewheel;
        document.onmousewheel = preventDefault; // older browsers, IE

        oldontouchmove = window.ontouchmove;
        window.ontouchmove = preventDefault; // mobile

        oldonkeydown = document.onkeydown;
        document.onkeydown = preventDefaultForScrollKeys;
        isDisabled = true;
    }

    function enableScroll() {
        if (!isDisabled) return;
        if (document.removeEventListener) {
            document.removeEventListener('DOMMouseScroll', preventDefault, false);
        }
        //document.body.onwheel = oldonwheel; // modern standard

        window.onmousewheel = oldonmousewheel1; // older browsers, IE
        document.onmousewheel = oldonmousewheel2; // older browsers, IE

        window.ontouchmove = oldontouchmove; // mobile

        document.onkeydown = oldonkeydown;
        isDisabled = false;
    }

    window.scrollHanlder = {
        disableScroll: disableScroll,
        enableScroll : enableScroll
    };
})(window, jQuery);

 

兼容性：IE7及以上、chrome、firefox、360、遨游。