白角webkit-scrollbar

Question

小提琴

我::-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); }