横向滚动条宽度设置无效，如何让横竖滚动条宽度一致？

你只设置了width属性，它仅作用于垂直滚动条。要让横向滚动条保持相同的粗细，需要同时设置height属性——因为横向滚动条的高度就是它的“宽度”（粗细）。

修改后的CSS代码：

::-webkit-scrollbar {
    width: 8px; /* 控制垂直滚动条的宽度 */
    height: 8px; /* 控制横向滚动条的高度（即粗细） */
}

/* 可选：统一滚动条滑块样式，让横竖视觉表现更一致 */
::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

简单说明：

• width：针对垂直滚动条，控制其横向的宽度
• height：针对水平滚动条，控制其纵向的高度，这就是你要的“宽度”效果
• 额外添加的滑块和轨道样式是为了让横竖滚动条的视觉表现完全统一，你可以根据需求调整颜色、圆角等参数

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