                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery實現自定義滾動條

不能實現自定義滾動條，求大神指點

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>拖動滑塊</title>
? ?<link rel="stylesheet" href="reset.css">
? ?<style type="text/css">
? ? ? ?body{background: #cccccc}
? ? ? ?.scroll-demo{
? ? ? ? ? ?width: 540px;
? ? ? ? ? ?border:1px solid #e5e5e5;
? ? ? ? ? ?background: #ffffff;
? ? ? ? ? ?margin: 30px auto;
? ? ? ?}
? ? ? ?/*標簽切換區域*/
.scroll-tab{
? ? ? ? ? ?height: 34px;
? ? ? ? ? ?border-bottom:1px solid #e5e5e5;
? ? ? ? ? ?color: #666;
? ? ? ? ? ?background: #f8f8f8;
? ? ? ?}

? ? ? ?.scroll-tab .tab-item{
? ? ? ? ? ?float: left;
? ? ? ? ? ?font:14px/34px "Microsoft Yahei";
? ? ? ? ? ?height: 34px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?border-right: 2px solid #e5e5e5;
? ? ? ? ? ?padding:0 20px;

? ? ? ?}
? ? ? ?.scroll-tab .tab-active{
? ? ? ? ? ?color: #00be3c;
? ? ? ? ? ?background: #ffffff;
? ? ? ? ? ?border-top: 2px solid #00be3c;
? ? ? ? ? ?margin:-1px 0 ;
? ? ? ?}
? ? ? ?/*滾動區內容區*/
.scroll-wrap{
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 300px;
? ? ? ? ? ?position: relative;
? ? ? ?}
? ? ? ?.scroll-wrap .scroll-content{
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?padding: 0 15px;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?.scroll-wrap .scroll-content h3{
? ? ? ? ? ?font: 16px/4 "Microsoft Yaheia";
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?font-weight: bold;
? ? ? ?}
? ? ? ?.scroll-wrap .scroll-content p{
? ? ? ? ? ?font-size: 14px;
? ? ? ? ? ?text-align: left;
? ? ? ? ? ?text-indent: 2em;
? ? ? ? ? ?margin-bottom: 20px;
? ? ? ?}
? ? ? ?/*滾動條*/
.scroll-wrap .scroll-bar{
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?top:0;
? ? ? ? ? ?right: 0px;
? ? ? ? ? ?width: 10px;
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?background: #eaeaea ;
? ? ? ?}
? ? ? ?/*滑塊*/
.scroll-wrap .scroll-slider{
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?top: 0px;
? ? ? ? ? ?left: 1px;
? ? ? ? ? ?background: red;
? ? ? ? ? ?width: 8px;
? ? ? ? ? ?height: 30px ;

? ? ? ?}
? ?</style>
</head>
<body>

<div class="scroll-demo">
? ?
<ul class="scroll-tab clearfix">
? ? ? ?<li class="tab-item tab-active">第一篇</li>
? ? ? ?<li class="tab-item">第二篇</li>
? ? ? ?<li class="tab-item">第三篇</li>
? ? ? ?<li class="tab-item">第四篇</li>
? ?</ul>
? ?
<div class="scroll-wrap">
? ? ? ?
<div class="scroll-content">
? ? ? ? ? ?<h3 class="anchor">春天來了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>春天來了，春風給新鉆出地面的小草披上了綠衣。
? ? ? ? ? ? ? ? ? ?春天來了，春精靈給了桃樹妹妹一個深情的吻，桃樹妹妹羞紅了臉兒。
? ? ? ? ? ? ? ? ? ?春天來了，柳樹發芽了，那芽兒歡快地生長著，嫩嫩的、綠綠的，風微微地吹著，
? ? ? ? ? ? ? ? ? ?小芽兒隨著柳枝在風中搖晃，就像一個個跳動的音符，正演奏著春天的贊歌。</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?春天來了，陽光明媚。
? ? ? ? ? ? ? ? ? ?凍冰了的小河在陽光照耀下懶洋洋地舒展著身子，慢悠悠地哼著小曲，
? ? ? ? ? ? ? ? ? ?舒坦極了。河里的小魚自由自在地嬉戲著，不時嘴里還冒出幾個泡泡，
? ? ? ? ? ? ? ? ? ?甭提多開心。小鴨子歡快地在水面上游動，不時呼朋引伴結隊而行，
? ? ? ? ? ? ? ? ? ?甭提多快活。在這暖暖的春日里，小孩子們在田野里、小河邊、草地上唱著歌兒，采著野花，享受著美好的春光。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?春天來了，陽光明媚。
? ? ? ? ? ? ? ? ? ?凍冰了的小河在陽光照耀下懶洋洋地舒展著身子，慢悠悠地哼著小曲，
? ? ? ? ? ? ? ? ? ?舒坦極了。河里的小魚自由自在地嬉戲著，不時嘴里還冒出幾個泡泡，
? ? ? ? ? ? ? ? ? ?甭提多開心。小鴨子歡快地在水面上游動，不時呼朋引伴結隊而行，
? ? ? ? ? ? ? ? ? ?甭提多快活。在這暖暖的春日里，小孩子們在田野里play.
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<h3 class="anchor">夏天來了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?風輕拂林梢，象手指滑過琴鍵，在螢火蟲的音樂里漫游，
? ? ? ? ? ? ? ? ? ?聽見鋼琴里的四季《山居歲月》淡淡槴子花香帶來春天的消息，
? ? ? ? ? ? ? ? ? ?《夏天來了》有蟬聲、陽光和青草香的旅行。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?2003 年夏天，螢火蟲背起行囊去旅行，以沿途的所見所聞創作《夏天來了》。
? ? ? ? ? ? ? ? ? ?農忙人家的生活、花東美麗的金針花、鄉間清晨的泥香、懷舊的牛車等等。
? ? ? ? ? ? ? ? ? ?拋開夏日炙熱、悶濕的印象，思緒游走在火車聲、蟬聲，陽光和青草香之間，
? ? ? ? ? ? ? ? ? ?整張專輯流露出清爽舒適的音樂風格，彷佛是夏季最清涼的風。[1]
? ? ? ? ? ? ? ? ? ?落葉曼妙起舞，翅果乘風飛行，螢火蟲的秋日漫游，發現大自然的精彩表情。
? ? ? ? ? ? ? ? ? ?同系列《山居歲月》、《夏天來了》接連兩屆入圍金曲獎“最佳流行音樂演奏專輯獎”和“最佳跨界音樂專輯獎”。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<h3 class="anchor">秋天來了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?秋天的美是成熟的，理智的．它不像春天一樣羞澀，嫵媚，也不像夏天一樣袒露，火熱，更不像冬天一樣內向，含蓄．
? ? ? ? ? ? ? ? ? ?秋天悄悄地的來了，來到了田野，來到了小溪邊，來到了山上，給大地換上了迷人的秋裝．我走進公園．陣陣秋風一吹，
? ? ? ? ? ? ? ? ? ?滿地的紅葉，好像朝霞灑滿了一地，真是美級了。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?秋，是個色，香，味俱全的季節，色，香，味之外，還有聲與光，那時秋聲與秋日，
? ? ? ? ? ? ? ? ? ?此時，絢麗繽紛的秋色使我眼花繚亂，應接不暇．繼續往前走，我看見一片茫茫無際的小草，
? ? ? ? ? ? ? ? ? ?碧綠的小草上點綴著各種各樣的菊花．它們像一個個少男少女手拉著手在廣闊的草地上跳著歡快的舞蹈．
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<h3 class="anchor">冬天來了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>冬季已經悄悄來臨，它沒有秋天那樣穿上華麗的服裝，僅僅增加了
? ? ? ? ? ? ? ? ? ?意見雪白的一幅，輕盈的灑在地面上。頓時，大地變成了雪的世界。
? ? ? ? ? ? ? ? ? ?一望無際的雪搖搖晃晃的落到地上，給大地披上了一層雪衣。</p>
? ? ? ? ? ? ? ?<p>冬把禮物灑在東營的地上，向人們展示冬的跡象</p>
? ? ? ? ? ?</div>

? ? ? ?</div>
? ? ? ?
<div class="scroll-bar">
? ? ? ? ? ?<div class="scroll-slider"></div>
? ? ? ?</div>
? ?</div>
</div>
<script type="text/javascript" src="jquery1.9.0.js"></script>
<script>
? ?var Scroll={};
? ?(function (win,doc,$) {
? ? ? ?/*構造函數含有一個形參，用于實例化的時候傳入信息。
? ? ? ? 對構造函數的原型添加屬性和方法，則其所有的實例就可以共享這些屬性和方法*/
function CusScrollBar(options) {
? ? ? ? ? ?this._init(options)
? ? ? ?}
? ? ? ?$.extend(CusScrollBar.prototype,{
? ? ? ? ? ?_init:function (options) {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?self.options={
? ? ? ? ? ? ? ? ? ?scrollDir:"y", ? ? //滾動方向
contSelector:"", ? //滾動區域選擇器
barSelector:"", ? ?//滾動條選擇器
sliderSelector:"" ? //滾動滑塊選擇器
}
? ? ? ? ? ? ? ?$.extend(true,self.options,options||{});
? ? ? ? ? ? ? ?self._initDomEvent();
? ? ? ? ? ? ? ?return self;
? ? ? ? ? ?},

? ? ? ? ? ?/*用于初始化DOM引用*/
_initDomEvent:function () {
? ? ? ? ? ? ? ?var opts=this.options;
? ? ? ? ? ? ? ?this.$cont=$(opts.contSelector);
? ? ? ? ? ? ? ?this.$slider=$(opts.sliderSelector);
? ? ? ? ? ? ? ?this.$bar=opts.barSelector?$(opts.barSelector):self.$slider.parent();
? ? ? ? ? ? ? ?this.$doc=$(doc);
? ? ? ? ? ? ? ?this._initSliderDragEvent()._bindContentScroll();
? ? ? ? ? ?},
? ? ? ? ? ?/*初始化滑塊拖動的功能*/
_initSliderDragEvent:function () {
? ? ? ? ? ? ? ?var self=this,
? ? ? ? ? ? ? ? ? ? ? ?slider=this.$slider,
? ? ? ? ? ? ? ? ? ? ? ?sliderEl=slider[0];

? ? ? ? ? ? ? ?/*當有滑塊這個元素的時候，進行一系列的操作*/
if(sliderEl){
? ? ? ? ? ? ? ? ? ?var doc=this.$doc,
? ? ? ? ? ? ? ? ? ? ? ? ? ?dragStartPagePosition,
? ? ? ? ? ? ? ? ? ? ? ? ? ?dragStartScrollPosition,
? ? ? ? ? ? ? ? ? ? ? ? ? ?dragContBarRate;
? ? ? ? ? ? ? ? ? ?function mousemoveHandler(e) {
? ? ? ? ? ? ? ? ? ? ? ?e.preventDefault();
? ? ? ? ? ? ? ? ? ? ? ?console.log("mousemove");
? ? ? ? ? ? ? ? ? ? ? ?if(dragStartPagePosition==null){
? ? ? ? ? ? ? ? ? ? ? ? ? ?return;
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?/*下面表示內容的滾動高度*/
self.scrollTo(dragStartScrollPosition +(e.pageY - dragStartPagePosition) * dragContBarRate);

? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?/*此處的e為jQuery的事件對象*/
slider.on("mousedown",function (e) {
? ? ? ? ? ? ? ? ? ? ? ?/*首先阻止默認的默認行為*/
e.preventDefault();
? ? ? ? ? ? ? ? ? ? ? ?console.log("mousedown");
? ? ? ? ? ? ? ? ? ? ? ?/*滑塊開始的位置（event.pagY是鼠標相對于文檔頂部邊緣的距離）*/
dragStartPagePosition=e.pageY;
? ? ? ? ? ? ? ? ? ? ? ?/*滑塊開始滾動的位置*/
dragStartScrollPosition=self.$cont[0].scrollTop;
? ? ? ? ? ? ? ? ? ? ? ?/*內容可滾動高度*/
dragContBarRate=self.getMaxScrollPosition()/self.getMaxSliderPosition();

? ? ? ? ? ? ? ? ? ? ? ?doc.on("mousemove.scroll",mousemoveHandler).on("mouseup.scroll",function (e) {
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("mouseup");
? ? ? ? ? ? ? ? ? ? ? ? ? ?/*解除事件的綁定*/
doc.off(".scroll");
? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ?});

? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?return self;
? ? ? ? ? ?},
? ? ? ? ? ?/*監聽內容的滾動，同步滑塊的位置*/
_bindContentScroll:function () {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?self.$cont.on("scroll",function () {
? ? ? ? ? ? ? ? ? ?var sliderEl=self.$slider && self.$slider[0];
? ? ? ? ? ? ? ? ? ?if(sliderEl){
? ? ? ? ? ? ? ? ? ? ? ?sliderEl.style.top=self.getSliderPosition()+"px";
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ?return self;
? ? ? ? ? ?},
? ? ? ? ? ?/*計算滑塊的當前位置*/
getSliderPosition:function () {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?var maxSliderPosition=self.getMaxScrollPosition;
? ? ? ? ? ? ? ?return Math.min(maxSliderPosition,maxSliderPosition*self.$cont[0].scrollTop
/self.getMaxScrollPosition());
? ? ? ? ? ? ? ?/*滑塊移動的距離：滑塊可移動的距離*當前內容已經滾動的距離/內容可滾動的高度*/
},
? ? ? ? ? ?/*內容可滾動的高度.其中$cont.height()表示文檔的可視高度*/
getMaxScrollPosition:function () {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?return Math.max(self.$cont.height(),self.$cont[0].scrollHeight)-self.$cont.height();
? ? ? ? ? ?},
? ? ? ? ? ?/*滑塊可移動的距離：滾動條的高度減去滑塊的高度*/
getMaxSliderPosition:function () {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?return self.$bar.height()-self.$slider.height();
? ? ? ? ? ?},
? ? ? ? ? ?scrollTo:function (positionVal) {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?self.$cont.scrollTop(positionVal);
? ? ? ? ? ?}
? ? ? ?});
? ? ? ?win.CusScrollBar=CusScrollBar;
? ?})(window,document,jQuery);
?/* var scroll1=new CusScrollBar({

? ? ? ?contSelector:".scroll-wrap", ? //滾動區域選擇器
? ? ? ?barSelector:".scroll-bar", ? ?//滾動條選擇器
? ? ? ?sliderSelector:".scroll-slider" ? ?//滾滑塊選擇器
? ?});
? ?var scroll2= new CusScrollBar({

? ? ? ?contSelector:".scroll-wrap-2", ? //滾動區域選擇器
? ? ? ?barSelector:".scroll-bar-2", ? ?//滾動條選擇器
? ? ? ?sliderSelector:".scroll-slider-2" ? ?//滾滑塊選擇器
? ?});
? ?console.log(scroll1);
? ?console.log(scroll2)*/
</script>

</body>
</html>