如何仅为水平滚动条应用CSS样式？垂直滚动条需保留默认样式

你当前的问题根源在于全局设置了::-webkit-scrollbar的宽度，这会直接影响垂直滚动条，再加上未给垂直滚动条滑块配置样式，才导致它看起来“消失”了。要实现仅定制水平滚动条、保留垂直默认样式的效果，需要精准锁定水平方向的滚动条元素，完全不触碰垂直滚动条的相关设置：

/* 仅设置水平滚动条的高度，不干扰垂直滚动条 */
::-webkit-scrollbar:horizontal {
  height: 7px;
}

/* 定制水平滚动条的滑块样式 */
::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: rgba(92, 92, 92, 0.5);
  /* 此处添加-webkit-appearance: none仅会影响水平滑块，不会改动垂直滚动条 */
  -webkit-appearance: none;
}

/* 可选：如果需要定制水平滚动条的轨道样式，同样限定为horizontal */
::-webkit-scrollbar-track:horizontal {
  background-color: #f1f1f1; /* 示例颜色，可按需调整 */
}

核心逻辑说明：

• 利用:horizontal伪类，将所有滚动条样式的作用范围限定在水平滚动条上，垂直滚动条会完全保留浏览器的默认样式，不会被任何自定义代码修改。
• 替换掉原来的全局::-webkit-scrollbar选择器，避免同时影响水平和垂直两种滚动条。

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