如何在React应用中实现滚动条轨道透明仅保留滑块可见

要实现滚动条轨道完全透明、仅显示滑块的效果，你需要清除WebKit滚动条轨道的默认样式，而不仅仅设置transparent背景。以下是调整后的CSS代码：

* {
  box-sizing: border-box;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 0.5vw;
}

/* 关键修改：清除轨道默认样式，设置完全透明 */
::-webkit-scrollbar-track {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
  /* 可选：给滑块加一点内边距，让它和边缘有间隔 */
  border: 2px solid transparent;
  background-clip: content-box;
}
/*------------------------------------------------- */

body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.App {
  background-color: #0D1117;
  color: white;
  min-height: 100vh; /* 确保页面高度足够触发滚动条 */
}

关键说明： #

• background-color: transparent：将轨道背景设为完全透明
• border: none & box-shadow: none：清除WebKit浏览器给滚动条轨道默认添加的边框和阴影，这些隐藏样式正是导致你看到灰色轨道的原因
• 可选的滑块内边距设置：通过border: 2px solid transparent和background-clip: content-box，可以让滑块和页面背景形成更自然的间隔，避免完全贴紧边缘

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