我想将滚动条的拇指样式设置为固定圆形,但是有些东西我无法解决高度大小。现在发生的情况是,根据滚动条的长度,拇指的长度也会改变,而我希望不管滚动条有多长,都能得到一个固定的圆形。
这是我的代码:
.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>