                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery實(shí)現(xiàn)自定義滾動(dòng)條

不能實(shí)現(xiàn)自定義滾動(dòng)條，求大神指點(diǎn)

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>拖動(dòng)滑塊</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;
? ? ? ?}
? ? ? ?/*標(biāo)簽切換區(qū)域*/
.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 ;
? ? ? ?}
? ? ? ?/*滾動(dòng)區(qū)內(nèi)容區(qū)*/
.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;
? ? ? ?}
? ? ? ?/*滾動(dòng)條*/
.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">春天來(lái)了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>春天來(lái)了，春風(fēng)給新鉆出地面的小草披上了綠衣。
? ? ? ? ? ? ? ? ? ?春天來(lái)了，春精靈給了桃樹妹妹一個(gè)深情的吻，桃樹妹妹羞紅了臉兒。
? ? ? ? ? ? ? ? ? ?春天來(lái)了，柳樹發(fā)芽了，那芽?jī)簹g快地生長(zhǎng)著，嫩嫩的、綠綠的，風(fēng)微微地吹著，
? ? ? ? ? ? ? ? ? ?小芽?jī)弘S著柳枝在風(fēng)中搖晃，就像一個(gè)個(gè)跳動(dòng)的音符，正演奏著春天的贊歌。</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?春天來(lái)了，陽(yáng)光明媚。
? ? ? ? ? ? ? ? ? ?凍冰了的小河在陽(yáng)光照耀下懶洋洋地舒展著身子，慢悠悠地哼著小曲，
? ? ? ? ? ? ? ? ? ?舒坦極了。河里的小魚自由自在地嬉戲著，不時(shí)嘴里還冒出幾個(gè)泡泡，
? ? ? ? ? ? ? ? ? ?甭提多開心。小鴨子歡快地在水面上游動(dòng)，不時(shí)呼朋引伴結(jié)隊(duì)而行，
? ? ? ? ? ? ? ? ? ?甭提多快活。在這暖暖的春日里，小孩子們?cè)谔镆袄?、小河邊、草地上唱著歌兒，采著野花，享受著美好的春光?br /> ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?春天來(lái)了，陽(yáng)光明媚。
? ? ? ? ? ? ? ? ? ?凍冰了的小河在陽(yáng)光照耀下懶洋洋地舒展著身子，慢悠悠地哼著小曲，
? ? ? ? ? ? ? ? ? ?舒坦極了。河里的小魚自由自在地嬉戲著，不時(shí)嘴里還冒出幾個(gè)泡泡，
? ? ? ? ? ? ? ? ? ?甭提多開心。小鴨子歡快地在水面上游動(dòng)，不時(shí)呼朋引伴結(jié)隊(duì)而行，
? ? ? ? ? ? ? ? ? ?甭提多快活。在這暖暖的春日里，小孩子們?cè)谔镆袄飌lay.
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<h3 class="anchor">夏天來(lái)了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?風(fēng)輕拂林梢，象手指滑過(guò)琴鍵，在螢火蟲的音樂(lè)里漫游，
? ? ? ? ? ? ? ? ? ?聽見鋼琴里的四季《山居歲月》淡淡槴子花香帶來(lái)春天的消息，
? ? ? ? ? ? ? ? ? ?《夏天來(lái)了》有蟬聲、陽(yáng)光和青草香的旅行。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?2003 年夏天，螢火蟲背起行囊去旅行，以沿途的所見所聞創(chuàng)作《夏天來(lái)了》。
? ? ? ? ? ? ? ? ? ?農(nóng)忙人家的生活、花東美麗的金針花、鄉(xiāng)間清晨的泥香、懷舊的牛車等等。
? ? ? ? ? ? ? ? ? ?拋開夏日炙熱、悶濕的印象，思緒游走在火車聲、蟬聲，陽(yáng)光和青草香之間，
? ? ? ? ? ? ? ? ? ?整張專輯流露出清爽舒適的音樂(lè)風(fēng)格，彷佛是夏季最清涼的風(fēng)。[1]
? ? ? ? ? ? ? ? ? ?落葉曼妙起舞，翅果乘風(fēng)飛行，螢火蟲的秋日漫游，發(fā)現(xiàn)大自然的精彩表情。
? ? ? ? ? ? ? ? ? ?同系列《山居歲月》、《夏天來(lái)了》接連兩屆入圍金曲獎(jiǎng)“最佳流行音樂(lè)演奏專輯獎(jiǎng)”和“最佳跨界音樂(lè)專輯獎(jiǎng)”。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<h3 class="anchor">秋天來(lái)了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?秋天的美是成熟的，理智的．它不像春天一樣羞澀，嫵媚，也不像夏天一樣袒露，火熱，更不像冬天一樣內(nèi)向，含蓄．
? ? ? ? ? ? ? ? ? ?秋天悄悄地的來(lái)了，來(lái)到了田野，來(lái)到了小溪邊，來(lái)到了山上，給大地?fù)Q上了迷人的秋裝．我走進(jìn)公園．陣陣秋風(fēng)一吹，
? ? ? ? ? ? ? ? ? ?滿地的紅葉，好像朝霞灑滿了一地，真是美級(jí)了。
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ?秋，是個(gè)色，香，味俱全的季節(jié)，色，香，味之外，還有聲與光，那時(shí)秋聲與秋日，
? ? ? ? ? ? ? ? ? ?此時(shí)，絢麗繽紛的秋色使我眼花繚亂，應(yīng)接不暇．繼續(xù)往前走，我看見一片茫茫無(wú)際的小草，
? ? ? ? ? ? ? ? ? ?碧綠的小草上點(diǎn)綴著各種各樣的菊花．它們像一個(gè)個(gè)少男少女手拉著手在廣闊的草地上跳著歡快的舞蹈．
? ? ? ? ? ? ? ?</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<h3 class="anchor">冬天來(lái)了</h3>
? ? ? ? ? ?<div class="scroll-ol">
? ? ? ? ? ? ? ?<p>冬季已經(jīng)悄悄來(lái)臨，它沒(méi)有秋天那樣穿上華麗的服裝，僅僅增加了
? ? ? ? ? ? ? ? ? ?意見雪白的一幅，輕盈的灑在地面上。頓時(shí)，大地變成了雪的世界。
? ? ? ? ? ? ? ? ? ?一望無(wú)際的雪搖搖晃晃的落到地上，給大地披上了一層雪衣。</p>
? ? ? ? ? ? ? ?<p>冬把禮物灑在東營(yíng)的地上，向人們展示冬的跡象</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,$) {
? ? ? ?/*構(gòu)造函數(shù)含有一個(gè)形參，用于實(shí)例化的時(shí)候傳入信息。
? ? ? ? 對(duì)構(gòu)造函數(shù)的原型添加屬性和方法，則其所有的實(shí)例就可以共享這些屬性和方法*/
function CusScrollBar(options) {
? ? ? ? ? ?this._init(options)
? ? ? ?}
? ? ? ?$.extend(CusScrollBar.prototype,{
? ? ? ? ? ?_init:function (options) {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?self.options={
? ? ? ? ? ? ? ? ? ?scrollDir:"y", ? ? //滾動(dòng)方向
contSelector:"", ? //滾動(dòng)區(qū)域選擇器
barSelector:"", ? ?//滾動(dòng)條選擇器
sliderSelector:"" ? //滾動(dòng)滑塊選擇器
}
? ? ? ? ? ? ? ?$.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();
? ? ? ? ? ?},
? ? ? ? ? ?/*初始化滑塊拖動(dòng)的功能*/
_initSliderDragEvent:function () {
? ? ? ? ? ? ? ?var self=this,
? ? ? ? ? ? ? ? ? ? ? ?slider=this.$slider,
? ? ? ? ? ? ? ? ? ? ? ?sliderEl=slider[0];

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

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

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

? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?return self;
? ? ? ? ? ?},
? ? ? ? ? ?/*監(jiān)聽內(nèi)容的滾動(dòng)，同步滑塊的位置*/
_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;
? ? ? ? ? ?},
? ? ? ? ? ?/*計(jì)算滑塊的當(dāng)前位置*/
getSliderPosition:function () {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?var maxSliderPosition=self.getMaxScrollPosition;
? ? ? ? ? ? ? ?return Math.min(maxSliderPosition,maxSliderPosition*self.$cont[0].scrollTop
/self.getMaxScrollPosition());
? ? ? ? ? ? ? ?/*滑塊移動(dòng)的距離：滑塊可移動(dòng)的距離*當(dāng)前內(nèi)容已經(jīng)滾動(dòng)的距離/內(nèi)容可滾動(dòng)的高度*/
},
? ? ? ? ? ?/*內(nèi)容可滾動(dòng)的高度.其中$cont.height()表示文檔的可視高度*/
getMaxScrollPosition:function () {
? ? ? ? ? ? ? ?var self=this;
? ? ? ? ? ? ? ?return Math.max(self.$cont.height(),self.$cont[0].scrollHeight)-self.$cont.height();
? ? ? ? ? ?},
? ? ? ? ? ?/*滑塊可移動(dòng)的距離：滾動(dòng)條的高度減去滑塊的高度*/
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", ? //滾動(dòng)區(qū)域選擇器
? ? ? ?barSelector:".scroll-bar", ? ?//滾動(dòng)條選擇器
? ? ? ?sliderSelector:".scroll-slider" ? ?//滾滑塊選擇器
? ?});
? ?var scroll2= new CusScrollBar({

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

</body>
</html>