這篇文章主要介紹“怎么使用jQuery消除網(wǎng)頁的滾動(dòng)條”，在日常操作中，相信很多人在怎么使用jQuery消除網(wǎng)頁的滾動(dòng)條問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用jQuery消除網(wǎng)頁的滾動(dòng)條”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)五峰免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
網(wǎng)頁有些時(shí)候需要能滾動(dòng)的效果，但是不想要滾動(dòng)條，我就遇到了這樣的需求。自己用jq寫了一個(gè)垂直滾動(dòng)條。
純css也可以實(shí)現(xiàn)
.box::-webkit-scrollbar{display:none}
但是edge和Firefox不兼容，自己想了一下只要監(jiān)聽滾輪事件，用jq寫應(yīng)該很簡單，所以就自己寫了一下。
原理：需要兩個(gè)div，第一個(gè)就命名為box-wrap吧，它是一個(gè)外層的包裹，由于是垂直滾動(dòng)，所以要固定高度，然后設(shè)置overflow:hidden，這樣豎直方向超過高度的部分就會(huì)被隱藏
第二個(gè)div就是內(nèi)容需要滾動(dòng)的div，命名為box，采用絕對定位，在監(jiān)聽到鼠標(biāo)滾輪事件后根據(jù)滾輪方向相對移動(dòng)
css代碼
#box-wrap{
position:relative;
width:100%;
height:500px;
overflow:hidden;
}
#box{
position:absolute;
width:100%;
height:1500px;
background:linear-gradient(blue,white);
}
為了能演示效果，里面的盒子我寫成了定高，并且讓背景漸變，正常來講可以高度auto讓文字撐開就行了，樣式的關(guān)鍵在于讓父類relative之后再讓子類absolute，這樣子類就可以相對父類移動(dòng)
js代碼
functioninitScroll(){
//js模擬垂直滾輪滑動(dòng)
varscrollEle=$('#box');
varscrollWrap=$('#box-wrap');
varscrollSpd=20;//滾輪滾動(dòng)的速度
varMax_dist=scrollEle.height()-scrollWrap.height();//兩個(gè)組件底邊之間的最大距離
if(Max_dist<=0){
return;
}
scrollEle.css('bottom',-Max_dist);
scrollEle.bind('mousewheel',function(event){
varstep=scrollSpd;
event.preventDefault();
event=event.originalEvent;
//兼容firefox
event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
vartempPos=parseInt(scrollEle.css('bottom'));
console.log(tempPos);
if(event.delta>0){
if(tempPos>(-Max_dist)){
tempPos-step>(-Max_dist)?tempPos=tempPos-step:tempPos=-Max_dist;
}
}else{
if(tempPos<0){
tempPos+step<0?tempPos=tempPos+step:tempPos=0;
}
}
//console.log(tempPos);
scrollEle.css('bottom',tempPos);
});
}
initScroll();
主要就是監(jiān)聽滾輪事件，從而判斷滾輪的方向
event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
這句是為了兼容火狐，其他瀏覽器都是屬性名稱為wheelDelta，值表示為120向上，-120向下，火狐是屬性名稱為detail，值表示為3向下，-3向上
每次觸發(fā)滾輪事件都會(huì)獲取子類的位置，然后根據(jù)滾輪的方向調(diào)整當(dāng)前位置，注意判斷一下邊界就好了
demo代碼
functioninitScroll(){
//js模擬垂直滾輪滑動(dòng)
varscrollEle=$('#box');
varscrollWrap=$('#box-wrap');
varscrollSpd=20;//滾輪滾動(dòng)的速度
varMax_dist=scrollEle.height()-scrollWrap.height();//兩個(gè)組件底邊之間的最大距離
if(Max_dist<=0){
return;
}
scrollEle.css('bottom',-Max_dist);
scrollEle.bind('mousewheel',function(event){
varstep=scrollSpd;
event.preventDefault();
event=event.originalEvent;
//兼容firefox
event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
vartempPos=parseInt(scrollEle.css('bottom'));
console.log(tempPos);
if(event.delta>0){
if(tempPos>(-Max_dist)){
tempPos-step>(-Max_dist)?tempPos=tempPos-step:tempPos=-Max_dist;
}
}else{
if(tempPos<0){
tempPos+step<0?tempPos=tempPos+step:tempPos=0;
}
}
//console.log(tempPos);
scrollEle.css('bottom',tempPos);
});
}
initScroll();
到此，關(guān)于“怎么使用jQuery消除網(wǎng)頁的滾動(dòng)條”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
重慶分公司
重慶分公司
