如何实现滚动条轨道透明并覆盖内容？CSS配置无效求助

需求与问题 #

想要实现滚动条轨道透明，且滚动条覆盖在内容上方不占用额外空间，使用了以下CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Cormorant+SC:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
    --fs-xs: clamp(0.75rem, 1.5vw + 0.3rem, 1rem);
    --fs-s: clamp(0.850rem, 1.8vw + 0.35rem, 1.25rem);
    --fs-m: clamp(1rem, 2vw + 0.4rem, 1.5rem);
    --fs-l: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
    --fs-xl: clamp(1.375rem, 3vw + 0.45rem, 3.25rem);
    --fs-xxl: clamp(1.5rem, 3.714vw + 0.407rem, 4.5rem);
    --fs-xxxl: clamp(3rem, 8.714vw + 1.207rem, 9rem);
    --fs-xxxxl: clamp(2.5rem, 6.714vw + 0.807rem, 7.5rem);
    --fs-xxxxxl: clamp(4.5rem, 10.714vw + 1.607rem, 11.25rem);
}
body {
  overflow: overlay;
}


::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90);
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }

但实际效果是：滚动条仍向内挤压内容、占用额外空间，轨道也未完全透明，呈现默认样式。

问题原因与修复方案 #

1. overflow: overlay 的优先级与兼容性问题 #

• overflow: overlay 是WebKit私有属性，仅在Chrome、Edge等WebKit内核浏览器生效。同时Tailwind的基础样式可能会覆盖该属性，导致滚动条仍占用布局空间。
• 修复：给body的overflow设置添加!important提升优先级，确保样式生效：

body {
  overflow: overlay !important;
}

2. 滚动条轨道未完全透明的处理 #

• 部分浏览器的::-webkit-scrollbar-track默认带有内阴影或隐性背景色，仅设置background: transparent无法清除默认样式。
• 修复：明确设置轨道的背景色为透明，并清除默认阴影：

::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: none;
}

3. 滚动条不占用空间的补充优化 #

• 给滚动条本身设置透明背景，同时可给滚动条滑块添加圆角优化视觉效果：

::-webkit-scrollbar {
  width: 10px;
  background: transparent; /* 确保滚动条本身不显示背景 */
}

::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90, 0.7); /* 可选：添加透明度提升视觉体验 */
  border-radius: 5px; /* 可选：给滑块添加圆角 */
}

完整修复后的代码 #

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Cormorant+SC:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
    --fs-xs: clamp(0.75rem, 1.5vw + 0.3rem, 1rem);
    --fs-s: clamp(0.850rem, 1.8vw + 0.35rem, 1.25rem);
    --fs-m: clamp(1rem, 2vw + 0.4rem, 1.5rem);
    --fs-l: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
    --fs-xl: clamp(1.375rem, 3vw + 0.45rem, 3.25rem);
    --fs-xxl: clamp(1.5rem, 3.714vw + 0.407rem, 4.5rem);
    --fs-xxxl: clamp(3rem, 8.714vw + 1.207rem, 9rem);
    --fs-xxxxl: clamp(2.5rem, 6.714vw + 0.807rem, 7.5rem);
    --fs-xxxxxl: clamp(4.5rem, 10.714vw + 1.607rem, 11.25rem);
}
body {
  overflow: overlay !important;
}


::-webkit-scrollbar {
    width: 10px;
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90, 0.7);
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: none;
  }

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