[通过::-webkit-scrollbar
选择器在CSS中使用自定义样式的滚动条时,然后取决于目标元素的display
属性,要么获得single-button
要么double-button
。
请参见下面的示例,该示例显示了具有display: flex
和display: block
的元素的不同行为。
body
{
background: #111;
color: white;
}
.wrapper
{
height: 150px;
overflow-y: scroll;
background: #333;
display: flex;
padding: 10px;
}
.wrapper > div
{
height: 300px;
}
.custom-scrollbar::-webkit-scrollbar
{
width: 16px;
height: 16px;
}
.custom-scrollbar::-webkit-scrollbar-track-piece
{
background-color: #444;
}
.custom-scrollbar::-webkit-scrollbar-thumb
{
background: #555;
}
.custom-scrollbar::-webkit-scrollbar-button
{
background: #666;
}
.custom-scrollbar::-webkit-scrollbar-button:vertical:decrement,
.custom-scrollbar::-webkit-scrollbar-button:vertical:increment,
.custom-scrollbar::-webkit-scrollbar-button:horizontal:decrement,
.custom-scrollbar::-webkit-scrollbar-button:horizontal:increment
{
border: 1px solid #000;
}
.custom-scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement,
.custom-scrollbar::-webkit-scrollbar-button:single-button:vertical:increment,
.custom-scrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement,
.custom-scrollbar::-webkit-scrollbar-button:single-button:horizontal:increment
{
background: #AAA
}
Device: Win10
<br />
Browser: Chrome
<br />
Goal: Custom styled scrollbar without the "double button", regardless of the display property.
<br />
<strong>Question</strong>: How to disable the "double button" completely?
<br />
<br />
<div style="display: flex">
<div style="width: 30%">
<div class="custom-scrollbar wrapper">
<div>
display: flex
<br />
scrollbar: custom
<br />
double-button: visible (= BAD)
</div>
</div>
</div>
<div style="width: 5%">
</div>
<div style="width: 30%">
<div class="custom-scrollbar wrapper" style="display: block">
<div>
display: block
<br />
scrollbar: custom
<br />
double-button: not visible (= GOOD)
</div>
</div>
</div>
</div>
<br />
<br />
<div style="display: flex">
<div style="width: 30%">
<div class="wrapper">
<div>
display: flex
<br />
scrollbar: default
<br />
double-button: not visible (= GOOD)
</div>
</div>
</div>
<div style="width: 5%">
</div>
<div style="width: 30%">
<div class="wrapper" style="display: block">
<div>
display: block
<br />
scrollbar: default
<br />
double-button: not visible (= GOOD)
</div>
</div>
</div>
</div>
CodePen链接:https://codepen.io/Acmion/pen/VweKxZa
如何完全禁用double-button
?
要禁用double-button
,请使用:
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:end:decrement
{
display: none;
}