为什么不能执行滚动-慕课网

首页课程实战体系课手记专栏慕课教程

为什么不能执行滚动

来源：3-7 滚动内容选中对应标签功能的实现

慕粉3462803

2016-09-01 16:55

<!doctype html>

<html>

<head>

<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-cont">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh厚脸皮

</div>

</div>

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>

写回答关注

1回答

乐1

2016-12-20 15:59:30

调用初始化函数时错误，
this._initSliderDragEvent();
._bindContScroll();
._bindMousewheel();
如果是连着调用，应该是
this._initSliderDragEvent()
._bindContScroll()
._bindMousewheel();
每个初始函数后面不应该有分号

0 0

jQuery实现自定义滚动条

来一次jQuery封装之旅，本教程带你深入理解滚轮事件交互

39578 学习 · 76 问题

查看课程

相似问题

无法进行滚动

回答 1

为什么不能移动文档内容

回答 1

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

回答 2

jquery滚动条

回答 1

为什么滚动条不出现，设置标题和段落样式也没效果？？

回答 1

打开慕课网App查看更多内容