So wenden Sie CSS nur auf die horizontale Bildlaufleiste an

Question

Ich bin ein neuer Praktikant und sie haben mir eine einfache Aufgabe gegeben: die horizontale Bildlaufleiste zu personalisieren

Ich habe diesen Code, aber die vertikale Bildlaufleiste verschwindet ... Ich brauche sie standardmäßig in vertikaler Richtung ... nur die horizontale Bildlaufleiste muss personalisiert werden.

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

Wenn ich den Code unten in die Mitte füge, wird auch die vertikale Bildlaufleiste personalisiert ... ich kann sie also nur personalisieren oder überhaupt ausblenden ... und das kann ich nicht

::-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 的垂直拇指消失，但到目前为止我在您的图像中看到，您不需要显示这一点。我不认为这可以通过其他方式实现。