法一：
①使用偽類(lèi)隱藏滾動(dòng)條（僅限Chrome與Safari）
②scrollbar-width: none;（僅限firefox）
③-ms-overflow-style: none;（僅限IE 10+）

/* 隱藏滾動(dòng)條 */
.element {

width: 100%;
height: 72px;
box-sizing: border-box;
padding-top: 16px;
overflow-x: scroll; /* 設(shè)置溢出滾動(dòng) */
white-space: nowrap;
overflow-y: hidden;
/* 隱藏滾動(dòng)條 */
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.element::-webkit-scrollbar {

display: none; /* Chrome Safari */
}

法二：
可滾動(dòng)的容器外層再簽套一個(gè)父盒子，父盒子設(shè)置overflow:hidde，再配合position，變相隱藏滾動(dòng)條

<div class=”outer-container”>
<div class=”inner-container”>
</div>
</div>

.outer-container {

position: relative;
overflow: hidden;
}
.inner-container {

position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
/* for Chrome */
.inner-container::-webkit-scrollbar {

display: none;
}

總結(jié)

以上是生活随笔為你收集整理的css怎么隐藏滚动条「建议收藏」(w3cschool)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。