[WEB插件]可自定义样式的滚动条(很灵活)

 jquery的脚本代码（实现滚动条的行为）{文件名:scrollbar.js}

(function($) {
    $.wzjLinscroll = function(content, option) { this.init(content, option); };

    $.extend($.wzjLinscroll.prototype, {
        settings: {
            cssWrapper: "block",
            cssContent: "context",
            cssScroll: "scroll",
            cssSlipBar: "slipBar",

            cssPrev: "slipTop",
            cssNext: "slipBottom",

            step: 1
        },
        $content: null,
        $wrapper: null,
        $scroll: null,
        $slipBar: null,

        $prev: null,
        $next: null,

        increment: 0,
        limitTop: 0,
        limitBottom: 0,
        range: 0,
        startTop: 0,

        currentTop: 0,

        scrollTimer: null,

        init: function(content, option) {
            $.extend(this.settings, option);
            this.$content = $(content);
            this.createControl();
            this.calculateParm();
            this.wire();
        },

        tool: {
            create$A: function() { return $("<a href='#' onfocus='this.blur()' />"); },
            create$Div: function() { return $("<div />") },
            getRefElement: function(e) {
                var targ;
                e = e ? e : event;
                if (e.target) targ = e.target;
                else if (e.srcElement) targ = e.srcElement;
                return targ;
            }
        },

        createControl: function() {
            var settings = this.settings;
            var tool = this.tool;
            this.$scroll = tool.create$Div().addClass(settings.cssScroll);

            this.$prev = tool.create$A().addClass(settings.cssPrev);
            this.$slipBar = tool.create$Div().addClass(settings.cssSlipBar);
            this.$next = tool.create$A().addClass(settings.cssNext);

            this.$wrapper = tool.create$Div().addClass(settings.cssWrapper);

            this.$scroll.append(this.$prev).append(this.$slipBar).append(this.$next);
            this.$content.wrap(this.$wrapper).after(this.$scroll);

        },

        calculateParm: function() {
            this.startTop = this.$slipBar.position().top;
            this.currentTop = this.startTop;

            var offsetBar = this.$slipBar.offset();
            var half = this.$slipBar.height() / 2;
            this.limitTop = offsetBar.top + half;

            var offsetNext = this.$next.offset();
            this.limitBottom = offsetNext.top - half;

            this.range = this.limitBottom - this.limitTop;

            var height = this.$content[0].scrollHeight - this.$content.height() / 2;
            this.increment = Math.round(height / this.range);
        },

        wire: function() {
            var self = this;
            var tool = self.tool;
            var settings = self.settings;
            var $scroll = self.$scroll;

            $scroll.mousedown(function(e) {
                self.stopScroll();
                var refElement = tool.getRefElement(e);
                if (refElement == self.$prev[0])
                    self.startScroll(-settings.step);
                else if (refElement == self.$next[0])
                    self.startScroll(settings.step);
                else if (refElement == self.$slipBar[0]) {
                    $(document).mousemove(function(e) {
                        self.scrollClick(e);
                    });
                }
            });

            $scroll.click(function(e) {
                var refElement = self.tool.getRefElement(e);
                if (refElement == self.$prev[0] || refElement == self.$next[0] || refElement == self.$slipBar)
                    return false;
                self.scrollClick(e);
            });

            $(document).mouseup(function() {
                self.stopScroll();
            });

            $scroll.mouseup(function() {
                self.stopScroll();
            });

            $scroll.mouseout(function() {
                self.stopScroll();
            });
        },

        scrollClick: function(e) {
            this.currentTop = e.pageY - this.limitTop + this.startTop;
            this.scrollTo(0);
        },

        startScroll: function(n) {
            var self = this;
            self.scrollTimer = window.setInterval(function() {
                self.scrollTo(n);
            }, 40);
        },

        stopScroll: function() {
            $(document).unbind("mousemove");
            if (this.scrollTimer) window.clearInterval(this.scrollTimer);
        },

        scrollTo: function(n) {
            var barTop = this.currentTop + n;
            barTop = barTop >= this.startTop ? barTop : this.startTop;
            var endTop = this.startTop + this.range;
            barTop = barTop <= endTop ? barTop : endTop;

            this.$slipBar.css({ top: barTop + "px" });
            this.$content.scrollTop((barTop - this.startTop) * this.increment);

            this.currentTop = barTop;
        }
    });

    $.fn.wzjLinscroll = function(option) {
        this.each(function(option) {
            new $.wzjLinscroll(this, option);
        });
        return this;
    };
}
        )(jQuery);

Css代码{文件名：scrollbar.css}

*
{
    margin: 0;
    padding: 0;
}
.block
{
    width: 458px;
    height: 196px;
    background: url(block.gif) no-repeat;
    position: relative;
    text-align: left;
    padding: 20px 50px 0px 20px;
}
.context
{
    width: 470px;
    text-align: left;
    height: 172px;
    overflow: hidden;
}
.context h4
{
    color: pink;
    margin: 5px 0 5px 0;
}
.context p
{
    text-indent: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: yellow;
}
.scroll, .scroll .slipBar
{
    background: url(scrollbar.gif) no-repeat;
}
.scroll
{
    position: absolute;
    top: 14px;
    right: 15px;
    width: 19px;
    height: 188px;
    z-index: 10;
    background-position: left top;
}
.scroll .slipBar
{
    position: absolute;
    top: 25px;
    z-index: 11;
    background-position: -21px top;
    width: 21px;
    height: 49px;
    cursor: pointer;
}

.scroll a
{
    width: 19px;
    height: 21px;
    position: absolute;
}

.scroll .slipTop
{
    top: 2px;
}

.scroll .slipBottom
{
    top: 168px;
}

链接图片:{文件名：scrollbar.gif}

链接图片:{文件名：block.gif}

Html代码

---

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
    <link rel="Stylesheet" href="scrollbar.css" />
</head>
<body>
    <form id="form1" runat="server">
    <center style="margin-top: 100px">
        <div class="context">
            <h4>
                轩辕氏</h4>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
        </div>
        <br />
        <br />
        <div class="context">
            <h4>
                轩辕氏</h4>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
            <p>
                黄帝麾下的轩辕氏是轩辕天朝的核心力量，他们热爱和平向往光明。轩辕氏是中华民族的祖先， 原本住在中原西北部，但见中原各部落互相争斗，百姓苦不堪言，黄帝下定决心要统一中原。轩辕氏经
                过一系列的征战后，不但统一了中原，也结束了中原长达百年的氏族战争。轩辕氏虽然建立了新秩序， 但仍然需要面对众多敌人。轩辕氏已经做好了充足的准备，抵御一切邪恶势力的进功。</p>
        </div>
    </center>
    </form>

    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="scrollbar.js"></script>

    <script type="text/javascript">
        $(function() { $(".context").wzjLinscroll();});
    </script>

</body>
</html>

---

最终显示效果如下：