iOS Safari滚动条隐藏失效问题求解决方案

你的当前方案在安卓和PC浏览器生效，但iOS Safari因为原生滚动机制的特殊性，::-webkit-scrollbar { display: none; } 可能不会完全生效，尤其是当启用了 -webkit-overflow-scrolling: touch 时。以下是两种可靠的解决方法：

方法一：嵌套容器偏移滚动条（兼容性最优） #

通过外层容器隐藏溢出，内层容器设置padding-right来抵消滚动条宽度，既保留原生滚动流畅性，又彻底隐藏滚动条：

修改后的HTML结构 #

<body>
  <div class="scroll-container">
    <div class="content">
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
    </div>
  </div>
</body>

对应的CSS代码 #

/* 外层容器：隐藏溢出区域 */
.scroll-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 内层滚动容器：处理滚动并偏移滚动条 */
.content {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 保留iOS原生滚动流畅度 */
  padding-right: 17px; /* 偏移iOS滚动条宽度（约17px），超出部分被外层隐藏 */
  box-sizing: content-box; /* 确保padding不影响容器宽度计算 */
}

/* 其他浏览器的滚动条隐藏 */
.content::-webkit-scrollbar {
  display: none;
}
.content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 原有样式保留 */
.a {
  height: 100px; 
  width: calc(100% - 20px); 
  margin-left: 10px;
  margin-top: 7px; 
  background-color: blue;
}

方法二：增强webkit滚动条样式覆盖 #

如果不想修改HTML结构，可以尝试通过更细致的webkit滚动条属性强制隐藏：

body {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 针对iOS Safari增强滚动条隐藏 */
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background-color: transparent;
}

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

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

.a {
  height: 100px; 
  width: calc(100% - 20px); 
  margin-left: 10px;
  margin-top: 7px; 
  background-color: blue;
}

说明 #

方法一的兼容性更稳定，因为它通过布局偏移而非样式隐藏的方式避开了iOS Safari的原生滚动条特性；方法二更简洁，但部分iOS版本可能仍存在兼容性问题，建议优先选用方法一。

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