白角webkit-scrollbar

Question

Fiddle

我正在使用::-webkit-scrollbar在Chrome中制作自定义滚动条。我有border-radius: 10px，在这样做时，顶部有白色角落：

抱歉，这很难看，因为它是滚动条。

我希望角落与标题div（#dadae3）的颜色相同。有没有办法在不改变滚动条样式的情况下使用CSS摆脱白角？

CSS（整个）：

body {
  padding: 0;
  margin: 0
}
::-webkit-scrollbar {
  width: 13px;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
  background: #dadae3;
  border-radius: 10px;
  border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
  background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
  background: #aeaeb5
}

HTML：

<div style='background: #dadae3; width: 100%; height: 30px;'></div>
<div style='width: 100%; height: 1000px'></div>

Answer 1

您必须设置::-webkit-scrollbar-corner伪元素，例如

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

Answer 2

您可以为伪元素background-color设置-webkit-scrollbar属性，这样做可以设置“角落颜色”。

Answer 3

我今天在与这个滚动条角作战，这占用了空间并产生了不必要的间隙。如果我在容器上使用<script> created: function() { var str = history.go(-1) if (str.includes("/users/")) { console.log("Value present"); } else { console.log("Not Present"); } } </script> ，则滚动条角会完全消失，而滚动条本身仍然可见。