如何隱藏滾動條

學習如何使用 CSS 隱藏滾動條。

如何隱藏滾動條

添加 overflow: hidden;，可以同時隱藏水平和垂直滾動條。

實例

body {
  overflow: hidden; /* Hide scrollbars */
}

親自試一試

若要僅隱藏垂直滾動條或僅隱藏水平滾動條，請使用 overflow-y 或 overflow-x：

實例

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

親自試一試

請注意，overflow:hidden 也會刪除滾動條的功能。無法在頁面內進行滾動。

隱藏滾動條但保留功能

要隱藏滾動條，但仍然能夠繼續滾動，可以使用以下代碼：

實例

/* 為 Chrome、Safari 和 Opera 隱藏滾動條 */
.example::-webkit-scrollbar {
  display: none;
}
/* 為 IE、Edge 和 Firefox 隱藏滾動條 */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

親自試一試

Webkit 瀏覽器（如 Chrome、Safari 和 Opera）支持非標準的 ::-webkit-scrollbar 偽元素，允許我們修改瀏覽器滾動條的外觀。IE 和 Edge 支持 -ms-overflow-style: 屬性，Firefox 支持 scrollbar-width 屬性，這些屬性允許我們隱藏滾動條但保留其功能。

相關頁面

教程：CSS 溢出

參考手冊：CSS overflow 屬性