这确实是移动端Web开发里一个容易踩的坑——iOS的Safari和Chrome对html/body的滚动容器处理逻辑和其他浏览器不太一样，设置overflow-x:hidden加上固定高度的body会直接改变滚动上下文，导致window的scroll事件失效。我来给你一套可行的解决方案：

问题根源分析 #

当你给body设置height:100vh时，body会变成一个固定高度的滚动容器，而不是让window作为默认的滚动容器。再加上overflow-x:hidden，iOS浏览器会把滚动行为限制在body内部，但window的scroll事件只监听window层面的滚动，自然就触发不了了。同时，只给html设overflow-x:hidden在iOS12+里不生效，因为这些浏览器会优先看body的溢出设置。

解决方案步骤 #

1. 调整CSS，恢复window作为滚动容器 #

修改你的CSS代码，核心是移除body的height:100vh，改用min-height:100vh保证背景全屏，同时保留html和body的overflow-x:hidden：

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* 禁止html层面横向滚动 */
}
body {
  margin-left: 10px;
  margin-right: 10px;
  min-height: 100vh; /* 用min-height代替height，保证背景全屏同时让body高度自适应内容 */
  background: linear-gradient(to top right, violet, cyan, darkviolet);
  width: 100%;
  overflow-x: hidden; /* 禁止body层面横向滚动，适配iOS12+ */
}
.wrapper {
  width: 100%;
  height: auto;
}
/* 额外添加：防止子元素宽度溢出导致横向滚动 */
* {
  box-sizing: border-box;
  max-width: 100%;
}

2. 验证scroll事件有效性 #

现在window重新成为滚动容器，你原来的JavaScript代码不需要任何修改，window.addEventListener('scroll')会正常触发所有滚动相关的逻辑（导航栏样式变化、元素动画等）。

补充说明 #

• 全局设置box-sizing:border-box和max-width:100%是为了从根源上避免子元素宽度超出视口，这样即使不用overflow-x:hidden，也不会出现横向滚动，双重保障。
• 如果页面中存在绝对定位或固定定位的元素，要确保它们的宽度也不会超出视口，否则依然可能触发横向滚动。

这样调整后，既能在所有设备（包括iOS12+的Safari和Chrome）上禁用横向滚动，又能保证scroll事件正常工作。

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