如何使用CSS Modules自定义div滚动条，解决样式不生效问题

问题原因 #

你的代码存在3个问题导致样式不生效：

• 没有给滚动容器设置固定高度和溢出滚动规则，容器不会生成滚动条，对应样式自然无法命中
• ::-webkit-scrollbar、::-webkit-scrollbar-thumb属于双冒号伪元素，你代码里前两个伪元素写的是单冒号，选择器不匹配
• 滑块和轨道都设置为红色，即使生效也无法区分两个结构，看起来像没生效

修正后的代码 #

Home.js 无需修改，保持原有逻辑即可 #

Home.module.scss 修正后代码： #

.scroll {
  // 先添加滚动触发的基础样式
  height: 300px; // 自定义容器高度，按需调整
  overflow-y: auto; // 内容超出高度时自动显示滚动条

  // 修正伪元素双冒号写法
  &::-webkit-scrollbar {
    width: 20px;
  }
  &::-webkit-scrollbar-thumb {
    background: #ff6b6b; // 滑块改浅红，和轨道区分
    border-radius: 25px;
  }
  &::-webkit-scrollbar-track {
    background-color: #ffe6e6; // 轨道改淡粉色
  }

  // 兼容火狐浏览器
  scrollbar-width: thick; // 火狐下滚动条宽度，可选thin/auto/thick
  scrollbar-color: #ff6b6b #ffe6e6; // 火狐下规则为 滑块颜色 轨道颜色
}

补充说明 #

• ::-webkit前缀的滚动条样式仅对Chrome、Edge、Safari等WebKit内核浏览器生效，火狐需要用上述单独兼容属性
• 如果要适配更多浏览器，可以考虑用JS实现自定义滚动条的方案

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