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

如果不太考虑老浏览器的兼容性的话，可以使用 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 2

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

<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;
}