像滾動條的控制樣式我們基本知道，看下：
::-webkit-scrollbar // 滾動條整體部分，可以設置寬度啥的
::-webkit-scrollbar // 滾動條整體部分，可以設置寬度啥的
::-webkit-scrollbar-button // 滾動條兩端的按鈕
::-webkit-scrollbar-track // 外層軌道
::-webkit-scrollbar-track-piece // 內層滾動槽
::-webkit-scrollbar-thumb // 滾動的滑塊
::-webkit-scrollbar-corner // 邊角
::-webkit-resizer // 定義右下角拖動塊的樣式
針對不同的瀏覽器，有不同的隱藏滾動條的方法，以下針對三大瀏覽器 chrome、ie（包括 edge）、firefox 分別敘述之：
Chorme
body::-webkit-scrollbar {
display: none;
}
IE/Edge
body {
-ms-overflow-style: none;
}
Firefox
firefox 是三者之中最麻煩的：
html {
/*注意！若只打 hidden，chrome 的其它 hidden 會出問題*/
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body {
height: 100%;
/*瀏覽器滾動條的長度大約是 18px*/
width: calc(100vw + 18px);
overflow: auto;
}
到此還沒結束，你還要在一些地方加上width: 100vw;。
假設你的HTML長這樣：
<body> <div id="example-1"> <p>山有木兮木有枝，心悅君兮君不知。</p> </div> <article id="example-2"> <h1>只願君心似我心，定不負相思意！</h1> <p>入我相思門，知我相思苦</p> <button>古詩詞</button> </article> </body>
那你的CSS就還要再加上：
#example-1 {
width: 100vw;
}
#example-2 {
width: 100vw;
}
總結下來
html {
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
height: 100%;
width: calc(100vw + 18px);
overflow: auto;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滾動條滑動顯示不滑動隱藏</title> <style> * { margin: 0; padding: 0; } html { overflow: -moz-hidden-unscrollable; height: 100%; } body::-webkit-scrollbar{ width: 0px; } body { -ms-overflow-style: none; height: 100%; width: calc(100vw + 18px); overflow: auto; } #box::-webkit-scrollbar { width: 6px; height: 6px } #box::-webkit-scrollbar-thumb { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #666; } #box::-webkit-scrollbar-track { background-color: #eee; } #box { width: calc(100vw - 0px); height: 100%; overflow-y: scroll; } .small { height: 3000px; } </style> </head> <body> <div id="box"> <div class="small"></div> </div> <script> let roll = 0; // 滾動的值 let stop = 0; // 對比時間的值 let timer = null; document.getElementById('box').addEventListener('scroll', function(){ var e = event || event.target; // console.log(e.srcElement.scrollTop) // 每次滑動前都清除一遍我們定義的定時器 clearTimeout(timer); // 每次滾動的時候，都讓box回到原來的寬度 document.getElementById('box').style.width = 'calc(100vw - 0px)'; // 這里我設置的是300毫秒，您可以更改您想要的間隔秒數 timer = setTimeout("JudgeScroll()", 300); roll = e.srcElement.scrollTop; }) function JudgeScroll() { // console.log(roll,stop) stop = document.getElementById('box').scrollTop; if(stop == roll) { // console.log('滾動停止'); // 判斷如果相等，就把box寬度增加18px，達到隱藏滾動條的效果 document.getElementById('box').style.width = 'calc(100vw + 18px)'; } } </script> </body> </html>