前端（瀏覽器相容性Ie與chrome）之滾動條的隱藏
阿新 • • 發佈：2019-01-09
在我們進行網站開發時，可能會有為了保持網站的美觀和整潔性而想要隱藏滾動條的想法。在最近的網站開發過程中，我就曾碰到過這個問題。針對這個問題也進行了相應的研究學習，整理了如下的幾個思路：
一、使用CSS樣式來解決（Chrome瀏覽器）
#content::-webkit-scrollbar { /*此處設定滾動條的寬度和高度，寬度為縱向滾動條設定，高度為橫向滾動條設定，設定為0的滾動條消失*/ width: 4px; height: 4px; } #content::-webkit-scrollbar-thumb{/*滾動條滑塊樣式*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } #content::-webkit-scrollbar-track {/*滾動條軌道樣式*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); }
在Chrome瀏覽器中，只要把你的滾動區域加上上述程式碼，就可以對滾動條的樣式進行設定了。然而這種方法只對Chrome瀏覽器有效，對於IE瀏覽器，使用上述程式碼是沒有任何效果的。當然IE瀏覽器也可以對滾動條樣式進行設定，但是隻能對滾動條的顏色這一項進行設定。程式碼如下：
#content{ /*三角箭頭的顏色*/ scrollbar-arrow-color: #fff; /*滾動條滑塊按鈕的顏色*/ scrollbar-face-color: #0099dd; /*滾動條整體顏色*/ scrollbar-highlight-color: #0099dd; /*滾動條陰影*/ scrollbar-shadow-color: #0099dd; /*滾動條軌道顏色*/ scrollbar-track-color: #0066ff; /*滾動條3d亮色陰影邊框的外觀顏色——左邊和上邊的陰影色*/ scrollbar-3dlight-color:#0099dd; /*滾動條3d暗色陰影邊框的外觀顏色——右邊和下邊的陰影色*/ scrollbar-darkshadow-color: #0099dd; /*滾動條基準顏色*/ scrollbar-base-color: #0099dd; }
而為了應對不同瀏覽器之間的相容性，我們要採用第二種方法，接下來請看第二種方法。
二、在滾動區域外在巢狀一層空白div，該層div有寬高，寬度應當小於滾動區域一個滾動條的寬度，設定外層overflow為hidden 溢位部分不顯示，這樣一來滾動條的部分已經在外層空間溢位，根據設定，將不再頁面顯示了。如下:
這裡Chrome和IE瀏覽器滾動條預設寬度都是17px，所以外層比滾動層寬度少17px。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .scroll-shell { width: 100px; height: 600px; overflow: hidden; } .scroll { width: 117px; height: 600px; overflow: auto; } .red{ width: 100%; height: 50%; background-color: red; } .green{ width: 100%; height: 50%; background-color: green; } .blue{ width: 100%; height: 50%; background-color: blue; } </style> </head> <body> <div class="scroll-shell"> <div class="scroll"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> </div> </body> </html>
上述html可以直接執行，採用的就是第二種方法。紅綠藍三種顏色已經超出滾動區域範圍，可滾動顯示，但是滾動條已經被我隱藏了，因此看不到。
應用第二種方法，我們就能夠完美解決隱藏滾動條和瀏覽器之間相容性的問題了。