【教程】在 H5 中禁用 iOS 滚动的橡皮筋行为

在需要禁止滚动的橡皮筋行为的元素上增加对应的 CSS 属性即可：

body {
  overflow: auto;
  overscroll-behavior: none;
}

在上述代码中，将 overscroll-behavior 属性设置为 none，就可以禁用滚动容器的橡皮筋效果，从而在 iOS 上去除橡皮筋效果。

overscroll-behavior 用于控制元素在滚动到边界时的行为。它可以应用于任何具有滚动行为的元素，例如滚动容器（如滚动条、滚动视图）或具有 overflow: auto 或 overflow: scroll 样式的元素。

该属性有以下几个可选值：

• auto：默认值，表示使用浏览器的默认行为。
• contain：当元素滚动到边界时，将会阻止该滚动事件继续传播到上层容器。
• none：当元素滚动到边界时，不执行任何滚动事件，即禁用橡皮筋效果。

overscroll-behavior 属性的兼容性如下：

• Chrome: 35+
• Firefox: 59+
• Safari: 14.1+
• Opera: 22+
• Edge: 79+
• iOS Safari: 14.5+
• Android Browser: 不支持
• Chrome for Android: 79+
• Samsung Internet: 4+

需要注意的是，overscroll-behavior 在一些旧版本的浏览器中可能不被支持，或者需要添加浏览器特定的前缀以实现兼容性。因此在使用该属性时，建议检查目标浏览器的兼容性，并根据需要考虑使用备用方案或者 polyfill 来实现类似的效果。