CSS滚动条拇指固定圆圈大小

Question

我想将滚动条的拇指样式设置为固定圆形，但是有些东西我无法解决高度大小。现在发生的情况是，根据滚动条的长度，拇指的长度也会改变，而我希望不管滚动条有多长，都能得到一个固定的圆形。

这是我的代码：

.container {
  display: flex;
  flex-direction: row;
}
.list1 {
  overflow-y: scroll;
  height: 100px;
  width: 100px;
  margin: 50px;
}

.list1::-webkit-scrollbar-track
{
 border-radius: 10px;
  border: 1px solid blue;
  width: 50px;
}

.list1::-webkit-scrollbar
{
 width: 50px;
 background-color: blue;
  border-radius: 10px;
}

.list1::-webkit-scrollbar-thumb
{
 border-radius: 100px;
 background-color: red;
  border: 5px solid blue;
}

<div class="container">
  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>

  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

正如您所看到的，根据我的项目数量，滚动条拇指的高度会有所不同。以下是我想要它看起来的方式：

- Facundo La Rocca

Answer 1

您只需要在.list1::-webkit-scrollbar-thumb中设置一个高度值即可：

.list1::-webkit-scrollbar-thumb {
  height:50px;
}

---

.container {
  display: flex;
  flex-direction: row;
}
.list1 {
  overflow-y: scroll;
  height: 100px;
  width: 100px;
  margin: 50px;
}
.list1::-webkit-scrollbar-track {
  border-radius: 10px;
  border: 1px solid blue;
  width: 50px;
}
.list1::-webkit-scrollbar {
  width: 50px;
  background-color: blue;
  border-radius: 10px;
}
.list1::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-color: red;
  border: 5px solid blue;height:50px;
}

<div class="container">
  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>

  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

- Alvaro

---

嗨，我遇到了一些问题：如果我从滚动条中更改高度大小，则会导致我的喜欢图标消失...有什么解决方法吗？非常感谢。 - Facundo La Rocca

@FacundoLaRocca 你说的“i消失了”是什么意思？还有要改变哪个元素的高度？ - Alvaro

抱歉，我的意思是如果我改变列表的高度，例如改为200像素，那么缩略图的高度也会随之改变。请尝试将列表的高度更改为200像素，我希望这个fiddle能让您理解我的意思。谢谢！ - Facundo La Rocca

@FacundoLaRocca 请查看这个问题。 - Alvaro