如何隐藏设置overflow:scroll但内容未溢出的可滚动组件默认滚动条？

优先推荐方案 #

你遇到这个问题的核心原因是overflow: scroll的默认规则就是无论内容是否溢出，都会强制显示滚动条占位，要实现「溢出才显示滚动条、未溢出自动隐藏」的效果，直接替换原有样式即可：

.target-element {
  /* 替换掉原来的overflow: scroll */
  overflow: auto;
  max-width: [你的原有宽度配置];
}

该方案原生兼容所有主流浏览器，无需额外兼容代码，是适配成本最低的最优解。

特殊场景兼容方案 #

如果你的业务逻辑必须保留overflow: scroll属性（比如布局需要固定滚动条占位宽度，避免内容溢出时出现宽度抖动），可以通过专属样式规则视觉隐藏滚动条，原有滚动功能不会受影响：

• Webkit内核浏览器（Chrome、Safari、新版Edge、移动端浏览器）

.target-element::-webkit-scrollbar {
  display: none;
}

• Firefox浏览器

.target-element {
  scrollbar-width: none;
}

• IE10+、旧版Edge浏览器

.target-element {
  -ms-overflow-style: none;
}

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