如何僅在水平捲軸上應用CSS
P粉276876663
P粉276876663 2024-04-01 16:25:15
0
2
398

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

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

::-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;
}
P粉276876663
P粉276876663

全部回覆(2)
P粉538462187

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

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板