如何更改滚动条轨道的宽度（滚动条下的线）

Question

我想像这样设计滚动条：

这意味着 -webkit-scrollbar-thumb 的宽度必须 5px 并且 -webkit-scrollbar-track 的宽度必须 2px 但我不能独立于 [ 更改 -webkit-scrollbar-track 的宽度=12=].

.main {
width: 100px;
height: 100px;
max-height: 100px;
background-color: #fff;
border: 1px solid red;
overflow-y: auto;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #dddddd;
  /*box-shadow: inset 0 0 5px #dddddd;*/
  border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}

<div class="main">
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
</div>

Answer 1

您可以将 'border-left' 和 'border-right' 添加到轨道和缩略图..

检查这个：

.main {
  width: 150px;
  height: 150px;
  max-height: 250px;
  background-color: #fff;
  border: 1px solid red;
  overflow-y: auto;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #dddddd;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-left: 9px solid white;
  border-right: 9px solid white;
}

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background: #9e9e9e;
  border-radius: 10px;
  border-left: 5px solid white;
  border-right: 5px solid white;
}

Answer 2

为了使滚动条轨道宽度更细，您可以在 ::-webkit-scrollbar-track 和 transparency 中使用 border-left 和 border-right，并将 background 更改为透明并使用box-shadow 改变轨道的颜色

.main {
width: 100px;
height: 100px;
max-height: 100px;
background-color: #fff;
border: 1px solid red;
overflow-y: auto;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: inset 0 0 5px #dddddd;
  border-radius: 4px;
  border-left: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}

<div class="main">
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
 <div>test</div>
</div>

如何更改滚动条轨道的宽度（滚动条下的线）

how to change width of scrollbar-track (line under ScrollBar)

html

css

scroll

scrollbar