欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么使用jQuery消除網(wǎng)頁的滾動條

這篇文章主要介紹“怎么使用jQuery消除網(wǎng)頁的滾動條”，在日常操作中，相信很多人在怎么使用jQuery消除網(wǎng)頁的滾動條問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用jQuery消除網(wǎng)頁的滾動條”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)五峰免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

網(wǎng)頁有些時候需要能滾動的效果，但是不想要滾動條，我就遇到了這樣的需求。自己用jq寫了一個垂直滾動條。

純css也可以實現(xiàn)

.box::-webkit-scrollbar{display:none}

但是edge和Firefox不兼容，自己想了一下只要監(jiān)聽滾輪事件，用jq寫應(yīng)該很簡單，所以就自己寫了一下。

原理：需要兩個div，第一個就命名為box-wrap吧，它是一個外層的包裹，由于是垂直滾動，所以要固定高度，然后設(shè)置overflow:hidden，這樣豎直方向超過高度的部分就會被隱藏

第二個div就是內(nèi)容需要滾動的div，命名為box，采用絕對定位，在監(jiān)聽到鼠標(biāo)滾輪事件后根據(jù)滾輪方向相對移動

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，這樣子類就可以相對父類移動

js代碼

functioninitScroll(){

//js模擬垂直滾輪滑動

varscrollEle=$('#box');

varscrollWrap=$('#box-wrap');

varscrollSpd=20;//滾輪滾動的速度

varMax_dist=scrollEle.height()-scrollWrap.height();//兩個組件底邊之間的最大距離

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ā)滾輪事件都會獲取子類的位置，然后根據(jù)滾輪的方向調(diào)整當(dāng)前位置，注意判斷一下邊界就好了

demo代碼

<html>

<head>

<style>

#box-wrap{

position:relative;

width:100%;

height:500px;

overflow:hidden;

}

#box{

position:absolute;

width:100%;

height:1500px;

background:linear-gradient(blue,white);

}

</style>

<scriptsrc="./jquery-1.11.3.min.js"></script>

</head>

<body>

<divid="box-wrap">

<divid="box"></div>

</div>

</body>

<scripttype="text/javascript">

functioninitScroll(){

//js模擬垂直滾輪滑動

varscrollEle=$('#box');

varscrollWrap=$('#box-wrap');

varscrollSpd=20;//滾輪滾動的速度

varMax_dist=scrollEle.height()-scrollWrap.height();//兩個組件底邊之間的最大距離

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();

</script>

</html>

到此，關(guān)于“怎么使用jQuery消除網(wǎng)頁的滾動條”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當(dāng)前名稱：怎么使用jQuery消除網(wǎng)頁的滾動條
URL標(biāo)題：http://chinadenli.net/article34/giocpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站維護、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站設(shè)計、網(wǎng)站收錄、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司