CSS Scroll thumb固定圆圈大小

Question

我想将滚动条拇指的样式设置为固定的圆圈，因为我无法修复高度尺寸，所以我有些遗漏。现在发生的事情是，根据滚动条的长度，拇指的长度，我想得到一个固定的圆圈，无论滚动条有多长。 这就是我所拥有的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，根据我拥有的项目数量，滚动条拇指将采用的高度。在我希望它看起来的方式下面：

Answer 1

您只需在.list1::-webkit-scrollbar-thumb：

中设置高度值即可

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;