為什么不能執(zhí)行滾動
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
/*滾動內(nèi)容區(qū)*/
.scroll-wrap{width:300px;500px;position:relative;}
/*滾動內(nèi)容*/
.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>
<!--滾動內(nèi)容區(qū)-->
<div class="scroll-wrap">
<!--滾動內(nèi)容-->
<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:"",//滾動內(nèi)容區(qū)選擇器
barSelector:"",//滾動條選擇器
sliderSelector:""http://滾動滑塊兒選擇器
wheelStep:10//滾輪步長
}
$.extend(true,self.options,options||{});
console.log(self.options.conSelector)}});
self._initDomEvent();
return self;
_initDomEvent:function(){
var opts=this.options;
//滾動內(nèi)容區(qū)對象，必填項
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;
},
//監(jiān)聽內(nèi)容的滾動，同步滑塊的位置
_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());},
//內(nèi)容可滾動的高度
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",//滾動內(nèi)容區(qū)選擇器
barSelector:".scroll-bar",//滾動條選擇器
sliderSelector:".scroll-slider"http://滾動滑塊兒選擇器
});
</script>
</body>
</html>
2016-12-20
調(diào)用初始化函數(shù)時錯誤，
this._initSliderDragEvent();
._bindContScroll();
._bindMousewheel();
如果是連著調(diào)用，應(yīng)該是
this._initSliderDragEvent()
._bindContScroll()
._bindMousewheel();
每個初始函數(shù)后面不應(yīng)該有分號