如何修改默认滚动条宽度？兼顾浏览器兼容性与默认外观

针对你遇到的问题，这里提供跨浏览器的适配方案，既能调整滚动条宽度，又尽量保留原生默认外观：

完整CSS代码 #

.column1 {
  background-color: gray;
  padding: 19px 18px 49px 9px;
  height: 100vh;
  overflow-y: scroll;
  /* Firefox：保留默认外观的同时缩小滚动条 */
  scrollbar-width: thin;
  /* 沿用系统默认的滚动条配色 */
  scrollbar-color: auto;
}

/* Webkit内核浏览器（Chrome/Edge/Safari等）：调整宽度并模拟原生样式 */
.column1::-webkit-scrollbar {
  width: 8px; /* 自定义滚动条宽度 */
}

/* 模拟原生滑块样式 */
.column1::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* 模拟原生轨道样式 */
.column1::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 滑块hover状态，贴近原生交互效果 */
.column1::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

关键说明 #

• Firefox 适配：scrollbar-width: thin 是Firefox原生支持的属性，它不会改变滚动条的默认外观，只是将宽度调整为系统预设的窄版样式，兼容性稳定。scrollbar-color: auto 确保使用系统默认的滑块和轨道配色，自动适配浅色/深色主题。
• Webkit 内核适配：Webkit浏览器只要修改 ::-webkit-scrollbar 的宽度，就会触发自定义样式重置，无法完全保留原生滚动条的细节。上面的代码通过半透明颜色和圆角，尽量贴近系统默认的视觉效果，同时支持hover交互。如果需要更精确匹配不同系统（Windows/macOS/Linux）的样式，可以针对性调整颜色值，但半透明设置已能适配大多数场景。

对应的HTML结构 #

<div class="column1">
  <!-- 添加足够多的内容让滚动条显示，例如： -->
  <p>测试内容行1</p>
  <p>测试内容行2</p>
  <p>测试内容行3</p>
  <p>测试内容行4</p>
  <p>测试内容行5</p>
  <p>测试内容行6</p>
  <p>测试内容行7</p>
  <p>测试内容行8</p>
  <p>测试内容行9</p>
  <p>测试内容行10</p>
  <!-- 重复更多行直到出现滚动条 -->
</div>

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