Html 如何使用-webkit滚动条按钮添加箭头

我有一个自定义滚动条。既然我这样做了，滚动条上的箭头就不再显示了

.scrollbar::-webkit-scrollbar-thumb {
    background-color: ##00a7e0;
  }

  .scrollbar::-webkit-scrollbar-track {
    background-color: #F5F5F5;
  }

  .scrollbar::-webkit-scrollbar-button {
    ????;
  }

我必须添加什么。滚动条：：-webkit滚动条按钮，我的箭头将再次显示？

（派对非常晚，但仍然如此）

您可以使用：--webkit scrollbar按钮选择器（请参阅webkit scrollbar伪选择器的完整分类）设置滚动条按钮的样式，但是让它们显示箭头要复杂得多，而且大多数人似乎要么使用背景图像，要么完全跳过按钮

以下是使用CSS三角形作为箭头的解决方案：

另一个（基于上面的一个，仅垂直滚动条，但想法相同）：

---

（）

这是一个完整的滚动条，带有暗模式按钮：

：：-webkit滚动条{
宽度：16px；
高度：16px；
}
：-webkit滚动条角，
：-webkit滚动条轨迹{
背景色：rgb（64、64、64）；
}
：-webkit滚动条拇指{
背景色：rgb（96,96,96）；
背景剪辑：填充框；
边框：2倍实心透明；
}
：-webkit滚动条拇指：悬停{
背景色：rgb（112、112、112）；
}
：-webkit滚动条拇指：活动{
背景色：rgb（128、128、128）；
}
/*钮扣*/
：-webkit滚动条按钮：单个按钮{
背景色：rgb（64,64,64）；
显示：块；
背景尺寸：10px；
背景重复：无重复；
}
/*向上*/
：-webkit滚动条按钮：单个按钮：垂直：递减{
高度：12px；
宽度：16px；
背景位置：中心4px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：递减：悬停{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：递减：激活{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
/*向下*/
：-webkit滚动条按钮：单个按钮：垂直：增量{
高度：12px；
宽度：16px；
背景位置：中心2px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：增量：悬停{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：增量：活动{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
/*左*/
：-webkit滚动条按钮：sing[1]：le按钮：水平：递减{
高度：12px；
宽度：12px；
背景位置：3px 3px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：水平：递减：悬停{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：水平：递减：活动{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
/*对*/
：-webkit滚动条按钮：单个按钮：水平：增量{
高度：12px；
宽度：12px；
背景位置：3px 3px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：水平：增量：悬停{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：水平：增量：活动{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

这是一个浅色版本

：：-webkit滚动条{
宽度：16px；
高度：16px；
}
：-webkit滚动条角，
：-webkit滚动条轨迹{
背景色：#eee；
}
：-webkit滚动条拇指{
背景色：#8f8e8e；
背景剪辑：填充框；
边框：2倍实心透明；
}
：-webkit滚动条拇指：悬停{
背景色：rgb（112、112、112）；
}
：-webkit滚动条拇指：活动{
背景色：rgb（128、128、128）；
}
/*钮扣*/
：-webkit滚动条按钮：单个按钮{
背景色：#eee；
显示：块；
背景尺寸：10px；
背景重复：无重复；
}
/*向上*/
：-webkit滚动条按钮：单个按钮：垂直：递减{
高度：12px；
宽度：16px；
背景位置：中心4px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：递减：悬停{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：递减：激活{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
/*向下*/
：-webkit滚动条按钮：单个按钮：垂直：增量{
高度：12px；
宽度：16px；
背景位置：中心2px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：增量：悬停{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：单个按钮：垂直：增量：活动{
背景图片

类似-->@ovokuro我也看过这篇文章，但这真的是唯一的解决方案吗？你只能通过图片添加箭头吗？水平箭头怎么样？垂直箭头，然后将其更改为水平箭头。

::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}