如何隐藏垂直滚动条但保留水平滚动条且不影响滚动功能？

这个需求完全可实现，核心思路是单独控制纵向滚动条的可见性，而非全局隐藏所有滚动条或禁用滚动功能，以下是两种可落地的实现方案：

方案1：内核针对性样式控制（代码量少，优先推荐） #

针对不同浏览器内核的滚动条规则单独配置，无需修改DOM结构：

Webkit内核浏览器（Chrome、Safari、新版Edge、Opera） #

通过分别设置滚动条的宽高控制横竖滚动条显隐：

/* 仅隐藏纵向滚动条，保留横向 */
.k-grid-content::-webkit-scrollbar {
  width: 0; /* 纵向滚动条对应width属性，设为0即可隐藏 */
  height: 8px; /* 横向滚动条对应height属性，可自定义数值调整滚动条厚度 */
}

/* 可选：自定义横向滚动条样式，适配UI风格 */
.k-grid-content::-webkit-scrollbar-thumb:horizontal {
  background: #c1c1c1;
  border-radius: 4px;
}

IE、旧版Edge #

.k-grid-content {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* 兼容兜底：将纵向滚动条挤出可视区域 */
  padding-right: 17px;
  box-sizing: content-box;
}

Firefox兼容处理 #

Firefox的scrollbar-width暂不支持单独控制横竖滚动条尺寸，可搭配下面的通用兼容方案使用。

方案2：容器嵌套通用兼容方案（全浏览器适配，无兼容问题） #

无需区分浏览器内核，通过两层容器结构把纵向滚动条挤出可视区域，保留所有滚动功能和横向滚动条的显示：

/* 父容器：负责裁剪超出的纵向滚动条 */
.grid-parent {
  overflow: hidden;
  width: [你的grid容器实际宽度];
  height: [你的grid容器实际高度];
}

/* 子容器：原.k-grid-content，宽度增加默认滚动条宽度，把纵向滚动条挤出父容器可视区 */
.grid-parent .k-grid-content {
  width: calc(100% + 17px); /* 17px为Windows系统默认滚动条宽度，可根据实际调整 */
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

原方案失效原因说明 #

• 方案1全局设置::-webkit-scrollbar {display: none}会隐藏所有方向的滚动条，不符合仅隐藏纵向的需求
• 方案2设置overflow-y: hidden会直接截断纵向溢出的内容，自然会禁用纵向滚动功能

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