Uncaught TypeError: Cannot read property 'scrollTop' of undefined
(function(win,doc,$){
function CusScrollBar(options){
this._init(options);
}
//CusScrollBar.prototype._init=function(){
// console.log("text");
//}
$.extend(true, CusScrollBar.prototype, {_init:function(options){
var self = this ;
self.options={
scrollDir : "y", //滚动的方向
contSelector : "", // 滚动内容选择器
barSelector : "", //滚动条选择器
sliderSelector : "" // 滚动滑块儿选择器
}
$.extend(true, self.options, options||{});
//console.log(self.options.contSelector);
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()
._bindContScroll();
},
//初始化滑块拖动功能
_initSliderDragEvent : function(self){
var slider = this.$slider,
sliderEl=slider[0];
self = this;
if(sliderEl){
var doc = this.$doc,
dragStratPagePosition,
dragStratScrollPosition,
dragContBarRate;
function mousemoveHandler(e){
e.preventDefault();
console.log("move");
if(dragStratPagePosition=null){
return;
}
self.scrollTo(dragStratScrollPosition+(e.pageY-dragStratPagePosition)*dragContBarRate);
}
slider.on("mousedown",function(e){
e.preventDefault();
console.log("mousedown");
dragStratPagePosition=e.pageY;
dragStratScrollPosition=self.$cont[0].scrollTop;
dragContBarRate=self.getMaxScrollPosition()/self.getMaxSliderPosition();
doc.on("mousemove.scroll",
mousemoveHandler).on("mouseup.scroll",function(e){
console.log("up");
doc.off(".scroll")
});
});
}
return self;
},
//监听内容的滚动,同步滑块的位置
_bindContScroll:function(){
var self=this;
self.$cont.on("scroll",function(){
var sliderEl=self.$slider[0];
if(sliderEl){
sliderEl.style.top=self.getSliderPosition()+"px";
}
});
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();
},
//滑块可移动的距离
getMaxSliderlPosition: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);
