CSS滚动缩略图固定圆的大小 [英] CSS Scroll thumb fixed circle size

问题描述

我想将滚动条缩放为固定的圆形，有一些我缺少，因为我无法修改高度大小。现在发生的是，根据滚动条的长度，拇指多长时间，我想得到一个固定的圆，不管滚动条有多长。
这是我有的：

  .container {display：柔性; 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>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < / ul> < ul class =list1> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < / ul>< / div>  

看，根据我有多少项目是滚动条拇指将采取的高度。下面我想让它看起来像：

.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>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < / ul> < ul class =list1> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < / ul>< / div>  

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:

解决方案

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>

这篇关于CSS滚动缩略图固定圆的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！