CSS ::-webkit-scrollbar 禁用双按钮答案

【问题标题】：CSS ::-webkit-scrollbar Disable Double ButtonCSS ::-webkit-scrollbar 禁用双按钮
【发布时间】：2020-10-05 20:18:22
【问题描述】：

当通过::-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？

【问题讨论】：

标签： css google-chrome webkit scrollbar

【解决方案1】：

要禁用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;
}

【讨论】：

【解决方案2】：

要摆脱双按钮，请使用：

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment, 
::-webkit-scrollbar-button:horizontal:end:decrement 
{
    display: none;
}

请注意，在这种情况下，我们不需要触及其他四个类似的伪选择器：

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement, 
::-webkit-scrollbar-button:horizontal:end:increment

所以不要对包含这些的其他答案感到困惑。

【讨论】：