React中如何在Google Chrome实现滚动条轨道透明？

你的代码设置background-color: transparent后轨道仍显示非透明，是因为Chrome默认给滚动条轨道添加了内部阴影样式，导致视觉上无法呈现透明效果。可以通过以下修改实现完全透明的轨道：

::-webkit-scrollbar {
  width: 0.5vw;
}

::-webkit-scrollbar-track {
  background: transparent; /* 替换单一的background-color，覆盖所有背景相关属性 */
  box-shadow: none; /* 移除Chrome默认的内部阴影 */
  border: none; /* 清除可能存在的默认边框 */
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
}

关键调整说明： #

• 用background: transparent替代background-color: transparent，可以同时覆盖背景颜色、背景图片等所有背景属性，避免默认样式的残留干扰。
• 添加box-shadow: none是核心：Chrome滚动条轨道默认带有inset类型的阴影，这是导致轨道看起来不透明的主要原因。
• 额外设置border: none，确保没有默认边框影响透明效果的呈现。

内容的提问来源于stack exchange，提问作者sébastien petit