css如何设置纵向滚动条的高度？

Question

设计给的图纵向滚动条的高度只有20px，但是无论如何设置都不管用。宽度可以设置，高度不管用。

.scrollbar-y-auto {
    overflow-y: auto;
    &::-webkit-scrollbar {
        height: 20px !important;
    }
}

.scrollbar-y-auto::-webkit-scrollbar-thumb {
    background-color: red; /* 设置滚动条的颜色 */
    height: 4px !important;
    min-height: 4px !important;
    max-height: 10px !important;
}

Answer 1

垂直滚动条的高度是根据当前内容决定的，内容越多滑块高度越小，并不是设置的。垂直滚动条能设置的是宽度，不是高度

<div class="box box1">
  <div class="text"></div>
</div>
<div class="box box2">
  <div class="text"></div>
</div>
<div class="box box3">
  <div class="text"></div>
</div>
<div class="box_x box4">
  <div class="text"></div>
</div>
<div class="box_x box5">
  <div class="text"></div>
</div>
<div class="box_x box6">
  <div class="text"></div>
</div>

.box{
    width:100px;
    height:100px;
    overflow-y:auto;
    background:#eee;
    display:inline-block;
}
.box::-webkit-scrollbar{
  width:3px;
}
.box::-webkit-scrollbar-thumb{
  background-color:#333;
}
.text{
  height:150px;
  background:skyblue;
}
.box2 .text{
  height:300px;
}
.box3 .text{
  height:450px;
}

.box_x{
    width:100px;
    height:100px;
    overflow-x:auto;
    background:#eee;
    display:inline-block;
}
.box_x::-webkit-scrollbar{
  height:3px;
}
.box_x::-webkit-scrollbar-thumb{
  background-color:#333;
}
.box4 .text{
  width:300px;
  height:10px;
}
.box5 .text{
  width:450px;
  height:10px;
}
.box6 .text{
  width:450px;
  height:10px;
}

Answer 2

有没有一种可能性，设计图展示的可能性，意思这里可以滚动的，
如果你的内容不够滚动，也可以没有滚动条，
建议和设计先确定一下，里面的内容，
是列表那种自增内容，还是他少给你了2-3个设计稿

以下内容是应付 SB 领导的，低成本过功能点：
可以写死内容的高度，监听 scroll 事件中 scrollTop 超过 npx 的情况强制结束滚动，回滚高度，把防抖啥的增加一下
PS：不死心一直滚动会导致页面抖一下抖一下
PS：滚动条可滚动区域和内容不匹配目标就是手动制造 BUG

Answer 3

如果不太考虑老浏览器的兼容性的话，可以使用 scrollbar-width: thin 这个新的CSS属性，但是不能设置指定高度，只能是提供的3个可选值里面选。

"scrollbar-width" | Can I use

---

如果想要继续用 -webkit-scrollbar 相关的伪类选择器的话。添加一个 background-color 就行了。

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #333;
}

其实兼容性也有问题的，火狐浏览器这种非 Blink 和 WebKit 内核的浏览器是不支持的

Answer 4

---

❓ 你遇到的问题

设置 纵向滚动条的高度 为 20px，但无论怎么调整都不起作用。这是因为：
✅ height 只对 横向滚动条 (overflow-x) 有效
✅ 纵向滚动条 (overflow-y) 需要使用 width 来控制尺寸
🚫 浏览器不会使用 height 来控制纵向滚动条的大小

---

🔍 代码分析

错误示例（对 纵向滚动条 无效）：

.scrollbar-y-auto {
    overflow-y: auto;
}

.scrollbar-y-auto::-webkit-scrollbar {
    height: 20px !important; /* ❌ 仅适用于横向滚动条 */
}

正确示例（控制 纵向滚动条 的宽度）：

.scrollbar-y-auto {
    overflow-y: auto;
}

.scrollbar-y-auto::-webkit-scrollbar {
    width: 20px; /* ✅ 正确方式 */
}

---

🎯 正确设置纵向滚动条样式

.scrollbar-y-auto {
    overflow-y: auto; /* 允许垂直滚动 */
}

/* 控制滚动条的宽度 */
.scrollbar-y-auto::-webkit-scrollbar {
    width: 20px;
}

/* 自定义滚动条滑块样式 */
.scrollbar-y-auto::-webkit-scrollbar-thumb {
    background-color: red; /* 设置滑块颜色 */
    border-radius: 10px; /* 让滑块更圆润 */
}

---

🧭 为什么纵向滚动条使用 width 控制？

1. 滚动条的方向决定了它的“主轴”

   • 纵向滚动条 是垂直的，沿着容器的右边缘滑动。
   • 横向滚动条 是水平的，沿着容器的底部滑动。

2. 滚动条的“厚度”是垂直于滚动方向的

   • 纵向滚动条 的“厚度”是横向的 width。
   • 横向滚动条 的“厚度”是纵向的 height。

✅ 举个例子

滚动方向	控制尺寸的属性	说明
纵向滚动	width	控制滚动条在右侧的“粗细”
横向滚动	height	控制滚动条在底部的“粗细”

---

🧱 浏览器实现的角度

浏览器（特别是基于 WebKit 的，如 Chrome、Edge、Safari）将滚动条视为一个嵌套在容器边缘的“组件”，其尺寸固定：

• ::-webkit-scrollbar —— 滚动条轨道
• ::-webkit-scrollbar-thumb —— 滑块（可拖动部分）
• ::-webkit-scrollbar-track —— 轨道（滑块所在的背景）

---