Question

我正在尝试设置滚动条的轨道样式。每当我设定赛道风格时：

 div::-webkit-scrollbar-track {
    background-color: blue;
 }

没有任何改变。

每当我设置滚动条的样式时：

div::-webkit-scrollbar {
    background-color: blue;
}

整个滚动条为蓝色，没有可见的拇指

我在这里缺少什么？

编辑：

我在Chrome上工作。奇怪的是，我所有溢出容器中的滚动条刚刚开始出现。在它们不可见之前，滚动拇指只会在悬停或滚动时出现（不记得哪个，但它肯定并不总是存在）。 Firefox似乎正在提供所需的行为。

最近Chrome滚动条有什么变化吗？

Answer 1

尝试以下代码段来设置滚动条的样式。

注意：这仅适用于-webkit浏览器，例如chrome，safari 因为CSS没有W3C标准，因此大多数浏览器都没有只是忽略它们。

div {
  width: 400px;
  height: 150px;
  overflow: auto;
}

div::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

div::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec a tempus felis.
  Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec
  a tempus felis. Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.
</div>

Answer 2

我知道这个线程已经有几年的历史了，但是我想添加一个关于它为什么不起作用的一般答案。根据我的经验

您总是必须至少设置整个 background-color ::-webkit-scrollbar 的某些属性（例如 { }）

能够编辑滚动条的 ::-webkit-scrollbar-thumb { } 和其他部分。

希望这能增加大家的理解。

样式:: - webkit-scrollbar-track无效

2 个答案: