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

【问题标题】：how to change width of scrollbar-track (line under ScrollBar)如何更改滚动条轨道的宽度（滚动条下的线）
【发布时间】：2021-04-10 07:01:23
【问题描述】：

我想编写这样设计的滚动条：

这意味着-webkit-scrollbar-thumb 的宽度必须5px 和-webkit-scrollbar-track 的宽度必须2px 但我不能改变-webkit-scrollbar-track 的宽度独立于-webkit-scrollbar-thumb。

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

【问题讨论】：

嗨，你有没有检查过哪个浏览器支持-webkit-scrollbar-track??比如火狐不支持
你好，是的，我检查了 chrome 并且没问题。但-webkit-scrollbar-track 的宽度不会改变。
在你的css中你忘记为-webkit-scrollbar-truck设置width: 2px;
我设置但没有改变任何东西。你测试了吗？
我现在无法检查，因为我使用的是 Firefox，而且我在 Ubuntu 上，抱歉。但我会尝试一些东西

标签： html css scroll scrollbar

【解决方案1】：

为了使滚动条轨道宽度变细，您可以在 ::-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>

【讨论】：

【解决方案2】：

您可以将'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;
}

【讨论】：