像滚动条的控制样式我们基本知道，看下：
::-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*/
calc(100vw + 18px);
overflow: auto;
}
到此还没结束，你还要在一些地方加上 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 {
100vw;
}
#example-2 {
100vw;
}
总结下来
html {
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
height: 100%;
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>