白角webkit-scrollbar

本文介绍了白角webkit-scrollbar的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用::-webkit-scrollbar在Chrome中创建自定义滚动条.我有一个border-radius: 10px，这样做的话，顶部有白色的角:

I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:

对不起，因为它是滚动条，所以很难看.

Sorry, it's kinda hard to see since it's a scrollbar.

我希望转角与标题div(#dadae3)具有相同的颜色.是否有任何方法可以仅使用CSS来消除白角，而无需更改滚动条的样式?

I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?

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>

scrollbar

白角webkit-scrollbar

问题描述

推荐答案