如何缩小滚动条轨道范围且不改变可滚动内容高度（Chrome/webkit）

嘿，这个需求在Chrome里用WebKit的自定义滚动条样式就能轻松实现！核心思路是只修改滚动条轨道的视觉显示范围，完全不影响页面内容的可滚动总量，正好匹配你的需求。

实现方案（垂直滚动条为例） #

通过给WebKit滚动条的轨道伪元素设置margin，就能压缩轨道的显示区域，滑块的滚动逻辑依然对应整个页面的可滚动内容。

/* 自定义滚动条整体宽度 */
::-webkit-scrollbar {
  width: 12px; /* 可根据你的需求调整宽度 */
}

/* 调整滚动条轨道的显示范围 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道背景色 */
  /* 通过上下margin缩小轨道的垂直范围 */
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: 6px; /* 可选：给轨道加圆角更美观 */
}

/* 滚动条滑块样式（保持正常滚动逻辑） */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
}

/* 滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

水平滚动条的调整方式 #

如果是水平滚动条，只需要修改轨道的左右margin即可：

::-webkit-scrollbar {
  height: 12px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  margin-left: 40px;
  margin-right: 40px;
  border-radius: 6px;
}

/* 滑块样式同垂直滚动条 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
}

补充说明 #

• 这个方案仅修改了滚动条轨道的视觉范围，页面内容的可滚动区域和总量完全不变，滑块的滚动依然对应整个内容的上下/左右移动。
• 如果需要非对称的轨道范围（比如只给顶部加margin，底部不加），直接调整对应的margin值即可。
• 确保你的页面容器设置了overflow: auto或overflow: scroll，这样滚动条才会正常显示。

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