如何用CSS设计并控制水平滚动条的宽度？

在WebKit内核的浏览器（如Chrome、Edge、Safari）中，垂直滚动条的尺寸由width属性控制，而水平滚动条的垂直方向尺寸（也就是你所说的“宽度”）需要用height属性来设置。

你只需要在已有的滚动条样式中添加height属性即可实现水平滚动条的窄化：

/* 同时控制垂直和水平滚动条的尺寸 */
::-webkit-scrollbar {
  width: 10px;  /* 垂直滚动条宽度 */
  height: 8px;  /* 水平滚动条高度（即窄化效果） */
}

/* 可选：自定义滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

/* 可选：自定义滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

/* 可选：滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

需要注意的是，上述样式仅对WebKit内核浏览器生效。如果需要兼容Firefox，可以使用scrollbar-width属性，但该属性会统一控制垂直和水平滚动条的粗细，无法单独设置：

/* Firefox下统一设置滚动条为细样式 */
body {
  scrollbar-width: thin;
}

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