如何隐藏可滚动navbar旁的滚动条且保留滚动功能

以下方案可在完全保留滚动功能的前提下，视觉上隐藏滚动条，仅需添加CSS样式即可实现，无需修改原有滚动逻辑： #

核心实现代码 #

你需要给导航栏元素添加以下三类样式，分别适配不同内核的浏览器：

1. 适配WebKit内核浏览器（Chrome、Safari、新版Edge、国内大多双核浏览器）

/* 你的导航栏选择器，根据实际项目情况修改 */
.navbar::-webkit-scrollbar {
  display: none;
}

2. 适配Firefox浏览器

.navbar {
  scrollbar-width: none;
}

3. 适配IE、旧版Edge浏览器

.navbar {
  -ms-overflow-style: none;
}

注意事项 #

• 代码中的.navbar需要替换为你项目中导航栏对应的实际类名、ID或选择器
• 上述样式仅作用于导航栏本身，不会影响页面其他区域的滚动条显示
• 滚动功能完全保留，触控滑动、鼠标滚轮、键盘方向键滚动都可以正常使用
• 若导航栏滚动失效，请先检查导航栏是否已经设置了overflow-x: auto/overflow-y: auto（根据滚动方向对应设置）

兼容性说明 #

• 该方案覆盖99%以上的主流用户浏览器，纯CSS实现无额外性能开销
• 极端老旧的小众浏览器不会应用隐藏样式，滚动条正常显示，导航栏滚动功能不受影响，属于平稳降级

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