React项目全局隐藏滚动条后如何为指定div单独显示滚动条

你写的实现思路是正确的，只需修正2个问题即可生效：

• 选择器里的webkit前缀要全小写，不能写成Webkit，正确的滚动条伪元素写法为::-webkit-scrollbar
• 额外补充滚动条的基础尺寸、轨道/滑块样式，仅设置display: block可能因为缺少默认样式导致看不到滚动条

完整实现代码 #

webkit内核浏览器（Chrome、Safari、新版Edge）覆盖样式 #

/* 覆盖全局配置，给tabview单独显示滚动条 */
.tabview::-webkit-scrollbar {
  display: block;
  width: 6px; /* 自定义垂直滚动条宽度，可按需调整 */
  height: 6px; /* 自定义水平滚动条高度，可按需调整 */
}

/* 滚动条轨道样式，可自行调整颜色、圆角 */
.tabview::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 3px;
}

/* 滚动条滑块样式，可自行调整颜色、圆角 */
.tabview::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.tabview::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

兼容火狐、IE/旧版Edge补充样式 #

如果你的全局隐藏滚动条配置里还包含其他浏览器的兼容代码：

/* 全局兼容其他浏览器隐藏滚动条的常见写法 */
* {
  -ms-overflow-style: none; /* 适配IE/旧版Edge */
  scrollbar-width: none; /* 适配火狐 */
}

需要额外给.tabview添加对应的覆盖配置：

.tabview {
  -ms-overflow-style: auto;
  scrollbar-width: thin; /* 火狐下滚动条宽度，可选值为auto/thin/none */
  /* 必须配置overflow属性，内容超出容器时才会触发滚动条显示 */
  overflow: auto;
}

注意事项 #

• 确保覆盖样式的加载顺序晚于全局隐藏滚动条的样式，如果优先级不够仍不生效，可以给选择器提权，比如写成body .tabview::-webkit-scrollbar
• 必须给.tabview元素设置overflow属性，比如overflow: auto或者overflow-y: scroll，内容超出容器范围时才会显示滚动条

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