                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /jQuery
                        
                        /jQuery實(shí)現(xiàn)自定義滾動(dòng)條

為什么不能執(zhí)行滾動(dòng)

<!doctype html>

<html>

<head>

<style>

/*滾動(dòng)內(nèi)容區(qū)*/

.scroll-wrap{width:300px;500px;position:relative;}

/*滾動(dòng)內(nèi)容*/

.scroll-wrap .scroll-cont{height:100%;overflow:hidden;}

/*滾動(dòng)條*/

.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>

? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

var Scroll();

(function(win,doc,$){

function CusScrollBar(options){

this._init(options);}

$.extend(CusScrollBar.prototype,{_init:function(){

var self=this;

self.options={

scrollDir:"y",//滾動(dòng)的方向

contSelector:"",//滾動(dòng)內(nèi)容區(qū)選擇器

barSelector:"",//滾動(dòng)條選擇器

sliderSelector:""http://滾動(dòng)滑塊兒選擇器

wheelStep:10//滾輪步長(zhǎng)

}

$.extend(true,self.options,options||{});

console.log(self.options.conSelector)}});

self._initDomEvent();

return self;

_initDomEvent:function(){

var opts=this.options;

//滾動(dòng)內(nèi)容區(qū)對(duì)象，必填項(xiàng)

this.$cont=$(opts.contSelector);

? ? ? ?//滾動(dòng)滑塊兒對(duì)象，必填項(xiàng)

this.$slider=$(opts.sliderSelector);

//滾動(dòng)條對(duì)象，必填項(xiàng)

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)聽(tīng)內(nèi)容的滾動(dòng)，同步滑塊的位置

_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;},

//計(jì)算滑塊的當(dāng)前位置

getSliderPosition:function(){

var self=this,

maxSliderPosition=self.

getMaxSliderPosition();

return Math.min(maxSliderPosition,

maxSliderPosition*self.$cont[0].scrollTop/self.getMaxScrollPosition());},

//內(nèi)容可滾動(dòng)的高度

getMaxScrollPosition:function(){

var self=this;

return Math.max(self.$cont.height(),

self.$cont[0].scrollHeight)-self.$cont.height();},

//滑塊兒可移動(dòng)的距離

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",//滾動(dòng)內(nèi)容區(qū)選擇器

barSelector:".scroll-bar",//滾動(dòng)條選擇器

sliderSelector:".scroll-slider"http://滾動(dòng)滑塊兒選擇器

});

</script>

</body>

</html>

慕粉3462803

2016-09-01

源自：jQuery實(shí)現(xiàn)自定義滾動(dòng)條 3-7

關(guān)注問(wèn)題我要回答

1330

操作

收起

1 回答

樂(lè)1
2016-12-20

調(diào)用初始化函數(shù)時(shí)錯(cuò)誤，

this._initSliderDragEvent();

._bindContScroll();

._bindMousewheel();

如果是連著調(diào)用，應(yīng)該是

this._initSliderDragEvent()

._bindContScroll()

._bindMousewheel();

每個(gè)初始函數(shù)后面不應(yīng)該有分號(hào)

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報(bào)

0/150

提交

取消

jQuery實(shí)現(xiàn)自定義滾動(dòng)條

參與學(xué)習(xí) 39574 人
解答問(wèn)題 83 個(gè)

來(lái)一次jQuery封裝之旅，本教程帶你深入理解滾輪事件交互

進(jìn)入課程

本課相似問(wèn)答

1 回答無(wú)法進(jìn)行滾動(dòng)

1 回答為什么不能移動(dòng)文檔內(nèi)容

2 回答不能實(shí)現(xiàn)自定義滾動(dòng)條，求大神指點(diǎn)

1 回答jquery滾動(dòng)條

1 回答為什么滾動(dòng)條不出現(xiàn)，設(shè)置標(biāo)題和段落樣式也沒(méi)效果？？

搜索更多本課相關(guān)問(wèn)答

為什么不能執(zhí)行滾動(dòng)

我要回答關(guān)注問(wèn)題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么不能執(zhí)行滾動(dòng)

1 回答

本課相似問(wèn)答

為什么不能執(zhí)行滾動(dòng)