html - 使用 CSS 更改滚动条拇指的大小

Question

我想要一个拇指比轨道大的滚动条。我可以更改颜色、不透明度等所有内容，但我不知道如何分别更改拇指和轨道的大小。

.custom_scrollbar::-webkit-scrollbar {
	width: 1px;
	
}
.custom_scrollbar::-webkit-scrollbar-track {
	background-color: rgb(255, 255, 255);
	-webkit-border-radius: 1px;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
	background-color: rgb(142, 142, 142);
	-webkit-border-radius: 0px;
    -webkit-width:5;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical:hover {
	background: rgba(0, 245, 255, 0.65);
}

#page {
    width: 75%;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100px;
    z-index: 30;
    margin: 5%;
    padding: 3%;
}

<div id="page" class=".custom_scrollbar">
  <h1>cool</h1>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text FIN :D </p>
</div>

这是我想要的样子:

Answer 1

这是一篇非常古老的帖子，但我有一个有效的解决方案可以“完全”满足要求。此外，这对于任何需要此解决方案的人来说都会派上用场。

Fiddle

/* SCROLLBAR */
/* Let's get this party started */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(0,0,0);
    border: 4px solid transparent;
    background-clip: content-box;   /* THIS IS IMPORTANT */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(25,25,25);
    border: 1px solid rgb(0,0,0);
}

设置 background-clip: content-box 是非常重要的。您将留下比滚动条拇指更细的轨道。干杯!