如何以非取巧方式（不使用event.preventDefault()）阻止iOS Safari网页弹跳？

首先得明确：iOS Safari早期版本里的滚动弹跳是浏览器原生默认行为，苹果官方文档确实没有直接给出“一键关闭”的选项，但我们可以通过标准CSS布局调整来实现，完全不需要用到JavaScript的event.preventDefault()。

下面给你两个可行方案，你可以根据目标用户的iOS版本选择：

方案1：使用标准CSS属性（适配iOS 13.0+） #

如果你的用户群体大多已经升级到iOS 13及以上版本，直接用CSS的overscroll-behavior属性就能搞定，这是专门控制滚动边界行为的标准特性：

html {
  overscroll-behavior: none;
}

设置为none后，页面滚动到边界时就不会触发弹跳效果，简洁又合规。

方案2：容器化滚动（兼容iOS 10.3及更早版本） #

针对iOS 10.3这种旧版本（overscroll-behavior还未支持），我们可以把页面内容放到独立的滚动容器中，让浏览器的弹跳行为只作用于容器而非整个文档：

1. 先重置html和body的样式，禁止它们的滚动：

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

2. 创建内容容器，让它承担滚动功能，同时保留iOS的流畅滚动体验：

.page-content {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

3. 最后把页面所有内容都嵌套到这个.page-content容器里。

这种方式下，滚动只会在内容容器内发生，整个文档不会触发浏览器的弹跳效果，而且完全是基于CSS布局的标准实现，没有任何取巧的操作。需要注意的是，固定定位的元素可能需要调整父级依赖，但整体适配成本很低。

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