自定义滚动条行为异常：滚动条始终显示而非仅滚动时可见

问题出在你自定义滚动条样式时，覆盖了浏览器默认的滚动条隐藏逻辑。默认情况下，webkit内核浏览器会在无滚动需求时隐藏滚动条，而你的样式强制设置了滚动条轨道和滑块的可见性，导致滚动条一直显示。

你可以通过添加过渡效果和状态控制，让滚动条仅在容器被hover或滚动时显示：

MuiCssBaseline: {
  styleOverrides: {
    body: {
      '-webkit-font-smoothing': 'subpixel-antialiased',
    },
    '*': {
      '&::-webkit-scrollbar': {
        width: '6px',
        opacity: 0, // 默认隐藏滚动条
        transition: 'opacity 0.2s ease', // 平滑过渡显示/隐藏
      },
      '&::-webkit-scrollbar-track': {
        background: 'transparent',
      },
      '&::-webkit-scrollbar-thumb': {
        background: '#BDBDBD',
        borderRadius: '80px',
      },
      '&::-webkit-scrollbar-thumb:hover': {
        background: '#A8A8A8',
      },
      // 当容器被hover、激活（滚动时），显示滚动条
      '&:hover::-webkit-scrollbar, &:active::-webkit-scrollbar': {
        opacity: 1,
      },
    },
  },
}

关键调整说明： #

• 给::-webkit-scrollbar添加opacity: 0，默认隐藏整个滚动条
• 加入transition属性实现平滑的显示/隐藏动画
• 通过:hover和:active状态触发滚动条显示（:active会在滚动过程中保持激活状态）

如果希望更精准地控制仅在滚动时显示，还可以结合JavaScript监听scroll事件，动态给容器添加类名来切换滚动条的可见性，但上述CSS方案已经能满足大部分场景的需求。

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