我正在使用::-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>
例如,您必须设置::-webkit-scrollbar-corner
伪元素
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
您可以为伪元素background-color
设置-webkit-scrollbar
属性,从而可以设置“角颜色”。
我今天在与这个滚动条角作战,这占用了空间并产生了不必要的间隙。如果我在容器上使用overflow: auto
,则滚动条拐角完全消失,而滚动条本身仍然可见。