如何仅通过CSS和/或jQuery让滚动条成为元素的一部分？

我完全懂你的困扰——明明已经把滚动条轨道去掉了，它还是会占着8px的宽度，把元素内容挤得偏移了。要实现滚动条悬浮在元素上方、不改变元素宽度的效果，核心就是让滚动条不占据布局空间，直接绘制在元素的内容区域之上。

下面给你具体的实现方案：

核心CSS配置 #

先给可滚动元素设置关键属性，再调整滚动条样式：

/* 给你的可滚动元素设置类名，比如.scrollable-content */
.scrollable-content {
  overflow-y: auto;
  /* 关键：让滚动条覆盖在内容上，不预留布局空间 */
  scrollbar-gutter: overlay;
  /* 若需兼容更老的WebKit浏览器（如Chrome <94），可以用下面这个废弃属性替代上面的scrollbar-gutter */
  /* overflow-y: overlay; */
}

/* 自定义滚动条样式 */
.scrollable-content::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度，和你之前设置的一致即可 */
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 滑块颜色，可根据你的应用主题调整 */
  border-radius: 4px; /* 圆角让滚动条更简洁 */
}

.scrollable-content::-webkit-scrollbar-track {
  background: transparent; /* 保持你之前隐藏轨道的设置 */
}

为什么这个方案有效？ #

默认情况下，overflow: auto会给滚动条预留固定宽度的空间，所以哪怕你隐藏了轨道，这个预留空间依然存在，导致元素内容偏移。而scrollbar-gutter: overlay（或旧版的overflow: overlay）会告诉浏览器：滚动条直接覆盖在元素内容的上层，不需要占用额外布局空间，这样滚动条就变成了元素的"悬浮层"，完全不会影响元素原本的宽度和内容布局。

兼容性说明 #

• scrollbar-gutter是CSS滚动条模块的标准属性，支持Chrome 94+、Firefox 91+、Edge 94+等现代浏览器；
• 如果你需要兼容更早的WebKit浏览器，overflow-y: overlay可以继续使用——虽然它已被标准标记为废弃，但目前主流WebKit内核浏览器（如Chrome、Safari）仍会支持它。

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