如何隐藏水平滚动条保留垂直滚动条且仍支持横向滚动功能

原有代码问题 #

你目前的写法会同时隐藏所有滚动条，原因有两点：

• 全局设置::-webkit-scrollbar {display: none}会命中所有元素的水平、垂直两个方向的滚动条，全部隐藏
• 给.section设置scrollbar-width: none会同时隐藏该元素的水平、垂直滚动条

兼容现代浏览器的实现方案（Chrome 2+、Safari 4+、Edge 79+、Firefox 121+） #

只需要针对目标元素的水平滚动条单独设置隐藏即可，完整代码如下：

.section {
  /* 保留垂直滚动自动出现、横向滚动自动出现的能力，可根据需求调整 */
  overflow-y: auto;
  overflow-x: auto;
}

/* 仅隐藏webkit内核浏览器下 .section 元素的水平滚动条 */
.section::-webkit-scrollbar:horizontal {
  display: none;
}

隐藏滚动条后，仍可以通过触摸板滑动、鼠标滚轮横向滚动、拖拽选中内容等方式触发横向滚动功能，不影响交互。

低版本Firefox兼容方案 #

如果需要兼容121版本以下的Firefox，可以用外层容器裁剪的方案实现需求：

/* 外层父容器 */
.section-wrapper {
  overflow: hidden;
  /* 数值需要匹配滚动条的默认高度，通常是8px左右，可根据实际场景调整 */
  padding-bottom: 8px;
}
/* 滚动内容容器 */
.section {
  overflow-y: auto;
  overflow-x: auto;
  height: 100%;
}

这个方案的原理是把横向滚动条挤出父容器的可视区域，同时不影响滚动功能，垂直滚动条也会正常显示。

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