如何僅在水平捲軸上應用CSS

Question

我是一名新實習生，他們給了一個簡單的任務：個人化水平滾動條

我有這段程式碼，但垂直滾動條消失了...我需要它在垂直方向上預設...只有水平滾動條必須個性化。

::-webkit-scrollbar {
    width: 7px;
  }
::-webkit-scrollbar-thumb:horizontal {
   border-radius: 8px;
   background-color: rgba(92, 92, 92, 0.5);
  }

如果我將下面的程式碼放在中間，垂直滾動條也會個性化...所以我只能將其個性化或根本隱藏它...而我不能這樣做

::-webkit-scrollbar-thumb {                             
-webkit-appearance: none;
}

Answer 1

以下是有關如何僅設定水平捲軸樣式的範例：

https://codepen.io/lmmm/pen/abKeEJw

#您可以使用您想要設定樣式的元素，並根據需要使用您的規則：

    horizontal text that overflows

#horizontal::-webkit-scrollbar {
  width: 7px;
}
#horizontal::-webkit-scrollbar-thumb:horizontal {
  border-radius: 15px;
  background-color: tomato;
}

Answer 2

您需要將偽裝飾器與 div 連結才能套用樣式。 這意味著垂直拇指來自 body 或 HTML 標籤。水平拇指用於內部 div。

#bars-chart-container::-webkit-scrollbar {
  width: 7px;
}
#bars-chart-container
::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: rgba(92, 92, 92, 0.5);
}

這可能不會阻止內部 div 的垂直拇指消失，但到目前為止我在您的圖像中看到，您不需要顯示這一點。我不認為這可以透過其他方式實現。