項目中，頁面效果需要展示一個頁面的移動端效果，使用的是一個蘋果手機樣式背景圖，咋也沒用過蘋果，咋也不敢形容。
如下圖所示：
在谷歌瀏覽器如圖一滾動條順利隱藏，但是火狐就如圖二了，有了滾動條丑的一批。
先上谷歌瀏覽器解決滾動條代碼：
CSS代碼：
<style>
.tp_box1{
width: 517px;
height: 400px;
/* auto在那個方向有益處 就在那個方向上有滾動條 */
overflow: auto;
}
.tp_box1::-webkit-scrollbar{
display: none;
}
.tp_box2{
width: 100%;
height: 500px;
background: pink;
}
.tp_box3{
width: 100%;
height: 500px;
background: red;
}
.tp_box4{
width: 100%;
height: 500px;
background: black;
}
</style>
HTML代碼：
<div class="tp_box1">
<div class="tp_box2"></div>
<div class="tp_box3"></div>
<div class="tp_box4"></div>
</div>
上述代碼完美解決圖一問題，但是此方法不兼容火狐，怎么辦呢？ 看如下代碼：
CSS代碼：
<style>
.tp_box{
width: 500px;
height: 400px;
overflow: hidden;
}
.tp_box1{
width: 517px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
}
.tp_box2{
width: 100%;
height: 500px;
background: pink;
}
.tp_box3{
width: 100%;
height: 500px;
background: red;
}
.tp_box4{
width: 100%;
height: 500px;
background: black;
}
</style>
HTML代碼：
<div class="tp_box">
<div class="tp_box1">
<div class="tp_box2"></div>
<div class="tp_box3"></div>
<div class="tp_box4"></div>
</div>
</div>
OK兼容都解決了！
一般滾動條默認寬度為17px，我們只需在有滾動條的盒子外面在套一個大盒子，子盒子比大盒子寬度多出17像素即可（這17px剛好存放滾動條位置），比如大盒子設置100px，子盒子設置117px，再給大盒子加上overflow:hidden; 讓超出部分隱藏，那么就達到所謂的隱藏滾動條效果，其實滾動條並沒有隱藏，只是被遮擋了看不見了而已,方法很實用。