如何在移动设备上移除滚动条？CSS代码桌面生效移动端无效

嘿，我懂你遇到的困扰——桌面端用::-webkit-scrollbar {display:none;}能正常隐藏滚动条，但到了手机端就失效了对吧？这是因为不同移动端浏览器的内核和属性支持存在差异，只靠WebKit的伪元素覆盖不全。

给你一套更全面的解决方案，能覆盖大部分主流移动端和桌面端浏览器：

完整CSS代码 #

/* 针对 WebKit 内核浏览器（Chrome、Safari、多数安卓浏览器） */
::-webkit-scrollbar {
  display: none;
}

/* 针对 Firefox 浏览器（包括移动端） */
.your-scroll-container {
  scrollbar-width: none;
}

/* 针对 IE 和 Edge 浏览器 */
.your-scroll-container {
  -ms-overflow-style: none;
}

/* 针对 iOS Safari，确保平滑滚动同时隐藏滚动条 */
.your-scroll-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

关键注意事项： #

• 把your-scroll-container替换成你实际需要隐藏滚动条的容器选择器（比如body、.content-wrapper等）
• 必须给容器设置overflow: auto或overflow: scroll，否则滚动条样式规则不会生效
• -webkit-overflow-scrolling: touch是iOS Safari特有的属性，能让滚动更流畅，同时确保滚动条隐藏生效

这样调整后，不管是桌面端还是移动端的主流浏览器，都能成功隐藏滚动条啦～

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