CSS隱藏滾動條

一、CSS隱藏滾動條樣式

CSS隱藏滾動條需要一些CSS樣式。來隱藏默認的滾動條並為自定義滾動條留下空間。

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

其中，.example應該替換為你想要隱藏滾動條的元素的類或ID。

這兩個CSS樣式都做了同樣的事情-隱藏了滾動條。然而，不同的瀏覽器需要不同的樣式來實現這個目標。所以我們首先要使用WebKit（Chrome，Safari和Opera）樣式來隱藏滾動條，然後使用IE，Edge和Firefox的樣式來實現同樣的隱藏效果。

二、CSS隱藏滾動條不生效

在某些情況下，CSS隱藏滾動條可能不會生效。一個常見的原因是CSS樣式被其它樣式覆蓋了。下面是一些你可能會面對的問題。

1. 父級元素被絕對定位

如果你的.example元素存在於絕對定位的父級元素內部，那麼它的滾動條表現可能會受到影響。如果你的父級元素已被絕對定位，嘗試把它轉換成相對定位或固定定位。

2. 為滾動條的子元素設置樣式

如果你為.example元素的子元素（如內容區域）設置了樣式，那麼這些樣式可能會重寫你的隱藏滾動條樣式。你可以通過在子元素中添加CSS樣式，如下所示：

.example .content::-webkit-scrollbar {
  display: none;
}

3. 其它樣式優先級高於隱藏滾動條樣式

如果你已經使用了!important聲明修改滾動條的樣式，那麼CSS隱藏滾動條可能會失效。你可以把!important聲明從其它樣式中刪除，這樣 CSS隱藏滾動條會正常工作。

三、CSS隱藏滾動條可以滾動

在隱藏滾動條的同時，滾動仍然必須工作。下面是一些CSS樣式，可以確保你的隱藏滾動條在滾動時正常工作。

/* Width */
.example::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Track */
.example::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Handle */
.example::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

/* Hover effect */
.example::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

這段CSS代碼會為你的隱藏滾動條創建扁平式的，灰色的滾動條。你可以把以下樣式拆分成如下幾個部分：

• ::-webkit-scrollbar 確定滾動條的寬度和高度。
• ::-webkit-scrollbar-track這個滾動條軌道的顏色。
• ::-webkit-scrollbar-thumb滾動條拖動塊的顏色和形狀。
• ::-webkit-scrollbar-thumb:hover鼠標懸停在滾動條拖動塊上時的顏色。

四、CSS隱藏滾動條自動判斷移動方向

默認情況下，CSS隱藏滾動條會在水平和垂直方向上隱藏滾動條。然而，這可能會導致用戶在垂直和水平方向上同時進行拖動。下面是一些CSS樣式，可以確保你的隱藏滾動條按照移動方向正常工作。

/* Auto-hide scrollbars */
.example {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-scrollbar-width: none; /* Safari and Chrome */
}

/* Only show vertical scrollbar when necessary */
.example::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.example::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

這段CSS代碼解決了一些空間問題。它會在必要時自動顯示隱藏滾動條，以及只在垂直方向上顯示滾動條。

五、CSS滾動條隱藏

除了隱藏滾動條，你也可以設置滾動條是透明的。

/* Hide the scrollbar, but still scrollable */
.example::-webkit-scrollbar {
  background-color: transparent;
}

.example::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 999px;
}

這樣設置可以讓滾動條在必要時雖然不會被隱藏，但它是透明的，不會影響您的視覺效果。

六、CSS滾動條設置

你也可以定製滾動條的外觀，以匹配你網頁的主題。

.example::-webkit-scrollbar {
  width: 12px;
}

.example::-webkit-scrollbar-track {
  background-color: #d8d8d8;
  border-radius: 10px;
}

.example::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
  border: 3px solid #fff;
}

.example::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

這段代碼將創建12像素寬的滾動條並使用灰色的軌道，淺灰色的拖動塊，以及白色的描邊。

七、CSS滾動條隱藏底部

有時滾動條出現在底部會顯得醜陋，因為用戶需要上下滑動。但是，HTML和CSS提供了隱藏底部的滾動條的解決方案。

/* Hide the scrollbar and prevent scrollbars from appearing */
.example {
  overflow-y: scroll;
  overflow-x: hidden;
}

.example::-webkit-scrollbar {
  display: none;
}

這段代碼對於隱藏滾動條非常好。然而，記得添加overflow-x: hidden;禁用水平滾動。

八、CSS超出滾動時隱藏滾動條選取

在某些情況下，只想在溢出內容時才顯示滾動條。

.example {
  height: 100px;
  overflow-y: scroll;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

這段css代碼將在用戶拉下內容時才顯示滾動條，而不是一直存在。通過這種方式，用戶可以獲得更多的屏幕空間。

結語

本文全面地介紹了如何使用CSS隱藏滾動條。通過靈活利用本文所介紹的CSS樣式，你可以輕鬆地隱藏或顯示滾動條，根據你的需要自定義你自己的滾動條。祝你好運。