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

/* 隱藏滾動條 */
.element {

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

display: none; /* Chrome Safari */
}

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

<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;
}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。