在網(wǎng)上搜關(guān)鍵詞“css 隱藏滾動條”斩熊，基本上都是以下兩種結(jié)果：
-
overflow: hidden
好吧尿赚，我相信搜這個問題的人一定是知道overflow的，人家顯然是想問隱藏了滾動條后還能繼續(xù)滾動的方法窟却。關(guān)鍵是有一半的搜索結(jié)果都是在給我們介紹overflow蜜猾。仍翰。。 -
::-webkit-scrollbar {display:none}
這個偽元素從效果上是可行的乐疆，然而這個webkit前綴就表示了它基本上只能在chrome里生效叮趴，顯然無法解決問題。
這里提供一個可以完美實現(xiàn)隱藏滾動條的方法友瘤，主要是利用了在box-sizing為content-box模式下的時候的一個奇特的性質(zhì)：當給元素設(shè)置padding-right的時候翠肘，滾動條會被往外擠，使得當前元素的寬度增加辫秧，這時我們只需要在當前元素外面套一層和當前元素原始寬高相同的元素束倍，再將外層元素設(shè)置為overflow: hidden 就可以隱藏滾動條了。
示例代碼如下：
body {
display: flex;
height: 100vh;
}
//外層元素
.box1 {
height: 20%;
width: 20%;
border: 1px solid #008080;
margin: auto;
overflow: hidden;
}
//內(nèi)層可滾動元素
.box2 {
box-sizing: content-box;
height: 100%;
padding-right: 17px;
width: 107%;
overflow: auto;
}
<div class="box1">
<div class="box2">
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
</div>
</div>
