我之前也踩过iOS设备上滚动条死活藏不住的坑！常规的::-webkit-scrollbar { display: none; }有时候确实不管用，尤其是在Safari里，大概率是因为iOS的滚动行为有特殊的浏览器处理逻辑。下面几个方法我试过都靠谱，你可以挨个试试：

1. 补全webkit滚动条全系列伪元素规则 #

有时候只设置主滚动条选择器不够，得把相关的伪元素都覆盖掉，强制消除滚动条的所有显示可能：

/* 覆盖所有滚动条相关元素 */
*::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

*::-webkit-scrollbar-track {
  display: none;
}

*::-webkit-scrollbar-thumb {
  display: none;
}

/* 针对iOS Safari的滚动优化 + 多浏览器兼容 */
* {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox兼容可选 */
  -ms-overflow-style: none; /* IE/Edge兼容可选 */
}

这里额外加width:0 !important和height:0 !important是为了强制消除滚动条占用的空间，避免出现布局偏移的小问题。

2. 用容器嵌套的“挤走”滚动条 #

如果CSS伪元素方法还是失效，可以试试布局层面的技巧——让滚动条存在但彻底移出可视区域：

• 外层容器设置overflow: hidden;并固定宽/高
• 内层容器设置overflow: auto; -webkit-overflow-scrolling: touch;，同时宽度（或高度）比外层大10px左右，把滚动条直接挤到外层容器的可视范围外

示例代码：

<div class="outer-container">
  <div class="inner-container">
    <!-- 你的滚动内容 -->
  </div>
</div>

.outer-container {
  width: 300px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.inner-container {
  width: calc(100% + 10px); /* 比外层宽10px，把滚动条挤出去 */
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

这个方法属于“曲线救国”，适合那些浏览器强制忽略滚动条隐藏规则的极端场景。

3. 检查动态内容或JS的影响 #

有时候滚动条重新显示，是因为页面内容动态加载后元素尺寸变化，触发了浏览器的滚动条重绘。你可以试试在内容更新后，手动触发一次样式刷新：

// 内容更新完成后执行
const scrollContainer = document.querySelector('.your-scroll-container');
scrollContainer.style.display = 'none';
scrollContainer.offsetHeight; // 强制触发重绘
scrollContainer.style.display = '';

另外要注意：iOS Safari默认在滚动过程中会临时显示滚动条，滚动停止后自动隐藏，如果你的需求是完全不显示哪怕滚动时，上面的方法应该能解决问题。

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