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

Question

我正在尝试设置滚动条的轨道.每当我设计赛道时:

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

没有什么变化.

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

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

整个滚动条是蓝色的,没有可见的拇指

我在这里错过了什么？

编辑:

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

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

Answer 1

我知道这个帖子已经有几年了，但我想添加一个一般答案来解释为什么它不起作用。根据我的经验

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

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

希望这能增加普遍的理解。

Answer 2

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

注意:这仅适用于-webkitchrome,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>