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

Question

我是一名新實習生，他們給了一個簡單的任務：個性化水平滾動條我有這段代碼，但垂直滾動條消失了...我需要它在垂直方向上默認...只有水平滾動條必須個性化。 ::-webkit-scrollbar{width:7px;}::-webkit-scrollbar-thumb:horizo​​ntal{border-radius:8px;background-color:rgba(92,92,92,0.5);}如

P粉538462187 · Answer

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

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

P粉056618053 · Answer

您需要將偽裝飾器與 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 的垂直拇指消失，但到目前為止我在您的圖像中看到，您不需要顯示這一點。我不認為這可以透過其他方式實現。