jq消除網頁滾動條
阿新 • • 發佈：2018-02-20
鼠標滾輪事件 init 滾動 scroll color lin 滾動條 速度 組件 
網頁有些時候需要能滾動的效果，但是不想要滾動條，我就遇到了這樣的需求。自己用jq寫了一個垂直滾動條。
純css也可以實現
.box::-webkit-scrollbar{display:none}
但是edge和Firefox不兼容，自己想了一下只要監聽滾輪事件，用jq寫應該很簡單，所以就自己寫了一下。
原理：需要兩個div，第一個就命名為box-wrap吧，它是一個外層的包裹，由於是垂直滾動，所以要固定高度，然後設置overflow:hidden，這樣豎直方向超過高度的部分就會被隱藏
第二個div就是內容需要滾動的div，命名為box，采用絕對定位，在監聽到鼠標滾輪事件後根據滾輪方向相對移動
css代碼
#box-wrap{ position: relative; width: 100% ; height: 500px ; overflow: hidden; } #box{ position: absolute; width: 100% ; height: 1500px ; background: linear-gradient(blue,white) ; }
為了能演示效果，裏面的盒子我寫成了定高，並且讓背景漸變，正常來講可以高度auto讓文字撐開就行了，樣式的關鍵在於讓父類relative之後再讓子類absolute，這樣子類就可以相對父類移動
js代碼
function initScroll(){ //js模擬垂直滾輪滑動 var scrollEle = $(‘#box‘) ; var scrollWrap = $(‘#box-wrap‘) ; var scrollSpd = 20 ;//滾輪滾動的速度 var Max_dist = scrollEle.height()-scrollWrap.height() ;//兩個組件底邊之間的最大距離 if(Max_dist<=0){ return ; } scrollEle.css(‘bottom‘,-Max_dist) ; scrollEle.bind(‘mousewheel‘,function(event){ var step = scrollSpd ; event.preventDefault() ; event = event.originalEvent ; //兼容firefox event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3; var tempPos = 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() ;
主要就是監聽滾輪事件，從而判斷滾輪的方向
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
這句是為了兼容火狐，其他瀏覽器都是屬性名稱為wheelDelta，值表示為120向上，-120向下，火狐是屬性名稱為detail，值表示為3向下，-3向上
每次觸發滾輪事件都會獲取子類的位置，然後根據滾輪的方向調整當前位置，註意判斷一下邊界就好了
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> <script src="./jquery-1.11.3.min.js"></script> </head> <body> <div id="box-wrap"> <div id="box"></div> </div> </body> <script type="text/javascript"> function initScroll(){ //js模擬垂直滾輪滑動 var scrollEle = $(‘#box‘) ; var scrollWrap = $(‘#box-wrap‘) ; var scrollSpd = 20 ;//滾輪滾動的速度 var Max_dist = scrollEle.height()-scrollWrap.height() ;//兩個組件底邊之間的最大距離 if(Max_dist<=0){ return ; } scrollEle.css(‘bottom‘,-Max_dist) ; scrollEle.bind(‘mousewheel‘,function(event){ var step = scrollSpd ; event.preventDefault() ; event = event.originalEvent ; //兼容firefox event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3; var tempPos = 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>View Code
jq消除網頁滾動條