CSS Scroll thumb fixed circle size

问题

I want to style a scroll bar thumb as a fixed circle, there is something I'm missing because I cant fix height size. Now what is happening is that depending on how long the scroll bar is, how long the thumb is too, and I'd like to get a fixed circle no matters how long the scroll bar is. Here is what I have:

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

As you can see, depending on how many items i have is the hight that the scroll bar thumb will take. Below the way I want it to look like:

回答1:

You just need to set a height value in the .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>

来源：https://stackoverflow.com/questions/41598048/css-scroll-thumb-fixed-circle-size

标签

css

scrollbar