为什么不能执行滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*滚动内容区*/
.scroll-wrap{width:300px;500px;position:relative;}
/*滚动内容*/
.scroll-wrap .scroll-cont{height:100%;overflow:hidden;}
/*滚动条*/
.scroll-wrap .scroll-bar{position:absolute;top:0;right:0;width:10px;height:100%;background-color:#E51519;}
/*滑块儿*/
.scroll-wrap .scroll-slider{position:absolute;top:0;left:5px;width:2px;height:30px;background-color:#969191;}
</style>
</head>
<body>
<!--滚动内容区-->
<div class="scroll-wrap">
<!--滚动内容-->
<div class="scroll-cont">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮
</div>
<!--滚动条-->
<div class="scroll-bar">
<!--滚动滑块儿-->
<div class="scroll-slider"></div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var Scroll();
(function(win,doc,$){
function CusScrollBar(options){
this._init(options);}
$.extend(CusScrollBar.prototype,{_init:function(){
var self=this;
self.options={
scrollDir:"y",//滚动的方向
contSelector:"",//滚动内容区选择器
barSelector:"",//滚动条选择器
sliderSelector:""//滚动滑块儿选择器
wheelStep:10//滚轮步长
}
$.extend(true,self.options,options||{});
console.log(self.options.conSelector)}});
self._initDomEvent();
return self;
_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();
._bindContScroll();
._bindMousewheel();
},
_initSliderDragEvent:function(){
var slider=this.$slider,
sliderEl=slider[0];
if(sliderEl){
var doc=this $doc,
dragStartPagePosition,
dragStartScrollPosition,
dragContBarRate;
slider.on("mousedown",function(e){
e.preventDefault();
console.log("mousedown");
dragStartPagePosition=e.pageY;
dragStartScrollPosition=self.$cont.scrollTop;
dragContBarRate=self.
getMaxScrollPosition()/self.
getMaxSliderPosition();
doc.on("mousemove.scroll",
mousemoveHandler)
.on("mouseup.scroll",function(e){console.log("mouseup");
doc.off(".scroll")});
_bindContScroll();
});
})
}
return self;
},
//监听内容的滚动，同步滑块的位置
_bindContScroll: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;},
_bindMousewheel:function(){
var self=this;
self.$cont.on("mousewheel,DOMMouseScroll",function(e){
e.preventDefault();
var oEv=e.originalEvent,
wheelRange=oEv.wheelDelta?-oEv.
wheelDelta/120:(oEv.detail||0)/3;
self.scrollTo(self.$cont[0].scrollTop+
wheelRange*self.options.wheelStep);})
return self;},
//计算滑块的当前位置
getSliderPosition:function(){
var self=this,
maxSliderPosition=self.
getMaxSliderPosition();
return Math.min(maxSliderPosition,
maxSliderPosition*self.$cont[0].scrollTop/self.getMaxScrollPosition());},
//内容可滚动的高度
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);
});
});
return self;},
win.CusScrollBar=CusScrollBar;
})(window,document,jQuery);
var scroll=new CusScrollBar({
contSelector:".scroll-wrap",//滚动内容区选择器
barSelector:".scroll-bar",//滚动条选择器
sliderSelector:".scroll-slider"//滚动滑块儿选择器
});
</script>
</body>
</html>
