添加:single-button伪选择器后WebKit滚动条按钮消失求助

问题根源在于浏览器对滚动条按钮的默认样式规则——默认状态下，single-button类型的滚动条按钮可能被设置为隐藏（比如display: none），直接添加伪类修饰无法覆盖默认规则，必须先重置基础样式。

按以下方式调整代码即可解决：

调整步骤 #

1. 先重置整个滚动条的基础样式，包括滚动条容器、轨道的默认属性，消除浏览器默认隐藏规则的干扰。
2. 强制设置滚动条按钮的display: block，确保按钮基础可见性。
3. 统一伪类选择器的顺序，避免因选择器匹配优先级或顺序问题导致失效。

完整可运行代码 #

/* 滚动条容器基础样式 */
::-webkit-scrollbar {
  width: 16px; /* 与按钮宽度保持一致，避免布局错位 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 重置滚动条按钮基础样式，强制显示 */
::-webkit-scrollbar-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}

/* 向上滚动按钮 */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}

/* 向下滚动按钮 */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

额外注意事项 #

• 确保滚动条容器的width与按钮宽度一致，避免按钮显示错位。
• Safari浏览器中需检查全局样式是否存在overflow相关规则干扰滚动条渲染。
• 部分Chrome版本对伪类顺序敏感，保持::-webkit-scrollbar-button:[状态]:[方向]:[增减]的顺序更稳妥。

内容的提问来源于stack exchange，提问作者Mina Hopgood