如何移除水平滚动菜单下方的滚动指示器

没问题！你碰到的这个滚动指示器其实就是浏览器默认显示的滚动条，咱们只需要通过几行CSS就能把它隐藏掉，同时还能保留菜单的水平滚动功能，兼容主流浏览器。

具体实现步骤 #

给你的水平滚动菜单容器添加以下CSS样式：

/* 假设你的滚动容器类名为 .horizontal-scroll-menu */
.horizontal-scroll-menu {
  /* 保留原有的滚动相关样式，比如： */
  overflow-x: auto;
  white-space: nowrap;
  
  /* 针对不同浏览器隐藏滚动条 */
  -ms-overflow-style: none;  /* 适配 IE 和旧版 Edge */
  scrollbar-width: none;     /* 适配 Firefox */
}

/* 适配 Chrome、Safari、新版 Edge 等 WebKit 内核浏览器 */
.horizontal-scroll-menu::-webkit-scrollbar {
  display: none;
}

原理说明 #

• -ms-overflow-style: none：让IE和旧版Edge隐藏滚动条，同时保持滚动功能可用
• scrollbar-width: none：Firefox专属属性，直接设置滚动条宽度为0（隐藏）
• ::-webkit-scrollbar { display: none }：针对WebKit内核浏览器，直接隐藏滚动条元素

这样设置之后，你的水平滚动菜单依然可以正常左右滚动，但不会再显示那个碍眼的滚动指示器啦！

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