小白关于jQuery的问题,求大神解答

gonglan_ 2018-04-15 04:28:59
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);


...全文
790 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧