能否实现Scrollbar Track比Scrollbar Thumb更粗？该需求是否可行？

针对不同浏览器的滚动条样式规则，我们可以通过自定义伪元素样式轻松达成「滚动条轨道（Track）比滑块（Thumb）更粗」的效果，以下是具体实现方案：

WebKit内核浏览器（Chrome、Edge、Safari等） #

利用WebKit专属的滚动条伪元素，通过设置滚动条整体宽度为轨道的目标粗细，再缩小滑块尺寸并通过margin让其在轨道内居中：

/* 垂直滚动条 */
::-webkit-scrollbar {
  width: 20px; /* 滚动条整体宽度，即轨道的最终显示粗细 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  width: 12px; /* 滑块宽度小于轨道 */
  margin: 4px; /* 让滑块在轨道内居中，露出更宽的轨道区域 */
  border-radius: 6px;
}

/* 水平滚动条适配 */
::-webkit-scrollbar-horizontal {
  height: 20px;
}

::-webkit-scrollbar-track-horizontal {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb-horizontal {
  background: #888;
  height: 12px;
  margin: 4px;
  border-radius: 6px;
}

Firefox浏览器 #

Firefox的滚动条伪元素规则略有不同，滑块的margin属性不生效，我们可以用与轨道同色的边框来模拟间距，实现轨道更粗的效果：

/* 垂直滚动条 */
::-moz-scrollbar {
  width: 20px; /* 轨道整体粗细 */
}

::-moz-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-moz-scrollbar-thumb {
  background: #888;
  width: 12px; /* 滑块宽度小于轨道 */
  border: 4px solid #f1f1f1; /* 用同色边框填充轨道与滑块的空隙 */
  border-radius: 6px;
}

/* 水平滚动条适配 */
::-moz-scrollbar-horizontal {
  height: 20px;
}

::-moz-scrollbar-track-horizontal {
  background: #f1f1f1;
  border-radius: 10px;
}

::-moz-scrollbar-thumb-horizontal {
  background: #888;
  height: 12px;
  border: 4px solid #f1f1f1;
  border-radius: 6px;
}

核心逻辑很简单：让滚动条整体（轨道）的尺寸大于滑块的尺寸，再通过间距或边框调整滑块的位置，就能直观呈现出轨道比滑块更粗的视觉效果。

内容的提问来源于stack exchange，提问作者TheCodingTentacle