不能实现自定义滚动条，求大神指点

源自：3-4 拖动滑块内容滚动的实现

不能实现自定义滚动条，求大神指点

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

提问者：慕用3882092 2017-03-24 16:53

不能实现自定义滚动条，求大神指点

个回答