如何仅隐藏Categories bar的滚动条？现有代码误隐藏sidebar滚动条

你的问题出在两个核心点：

• 选择器里的多余空格：#sidebar ::-webkit-scrollbar-thumb 中的空格会让它变成后代选择器，选中#sidebar下所有子元素的滚动条滑块，而非仅#sidebar自身的
• 选择器目标错误：你要隐藏的是Categories bar的滚动条，却错误使用了#sidebar的选择器

正确实现方案 #

假设你的Categories bar的HTML结构如下（用#categories-bar作为标识，可根据实际情况替换为你的class或id）：

<div id="sidebar">侧边栏内容</div>
<div id="categories-bar">分类栏内容</div>

1. WebKit内核浏览器（Chrome、Safari等）

直接针对Categories bar的滚动条伪元素设置隐藏，注意选择器之间不能有空格：

/* 完全隐藏滚动条，但保留滚动功能 */
#categories-bar::-webkit-scrollbar {
  display: none;
}

/* 可选：仅隐藏滚动条滑块，保留轨道样式 */
#categories-bar::-webkit-scrollbar-thumb {
  visibility: hidden;
}

2. 跨浏览器兼容处理

如果需要兼容Firefox、IE/Edge，补充以下代码：

#categories-bar {
  /* Firefox 隐藏滚动条 */
  scrollbar-width: none;
  /* IE/Edge 隐藏滚动条 */
  -ms-overflow-style: none;
}

关键注意事项 #

• 确保选择器精准匹配你的Categories bar元素（如果用class就写.categories-bar，对应实际HTML标识）
• 选择器与滚动条伪元素之间不能加空格，否则会误作用于子元素的滚动条

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