> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
# iOS 橡皮回弹
近期开发的项目有一部分是与微信公众号相关的 **H5** 页面，在 **Android** 端微信上页面效果展示无异常，但是在 **iOS 端** 微信多多少少会出现一些意想不到的 **bug**。此次主要针对移动端 **H5** 页面在 **iOS** 端产生的 **橡皮回弹**（**橡皮筋效果**）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
## 方案一：使用 inobounce.js
- 源代码如下：
[iNoBounce](https://github.com/lazd/iNoBounce)
在 html 主页面的 **header** 标签中引入 **inbounce.js**，即 ****。当引入此文件之后，iOS 端整个页面都无法滑动或滚动，若想滚动的元素能够实现滚动效果，则需要对滚动区域设置固定的高度，即 **height**、**max-height**，同时也要设置 **overflow: auto，** 实现页面滑动。为防止 iOS 端页面滚动发生卡顿现象，需要对滚动区域设置 **-webkit-overflow-scrolling: touch** 属性。
```html title="HTML Demo"
inobounce
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
- List Item 6
- List Item 7
- List Item 8
- List Item 9
- List Item 10
```
## 方案二：CSS 样式处理（推荐）
偶然间在 **iOS** 端打开一些公众号的 **H5** 活动页，没有产生所谓的橡皮回弹效果，于是就想着是否可以采用此效果来解决 **iOS** 端网页产生的橡皮回弹效果。最终尝试此方法可以实现 **iOS** 端页面固定，不产生橡皮回弹效果。在系统版本 **iOS13+** 上的设备上已解决橡皮筋效果，系统版本 **iOS12+** 的设备上没有尝试，后续准备找 **iOS12+** 的苹果手机进行进一步的测试，其次再将测试结果进行补充。
```html title="CSS 样式处理"
iOS橡皮回弹
```
主要 CSS 代码：
```css title="主要 CSS 代码"
/* 初始化 */
* {
margin: 0;
padding: 0;
}
/* 基本样式 */
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
box-sizing: border-box;
position: relative;
}
/* 超出滚动 */
#app {
width: 100%;
height: 100%;
overflow-y: auto;
}
```
**总结：**
总的来说，两种方案我在实际开发中都进行了尝试。方案一在微信中浏览 **H5** 网页时可以完美解决橡皮回弹效果；当 **H5** 页面在 **iOS** 端微信授权跳转时，底部会有一个导航条，此时导航条也有可能被遮盖，点击导航条两端的按钮没有反应。在 **Safari** 浏览器打开 **H5** 页面时，网页的顶端地址栏和底部菜单栏会有一定的遮挡，体验效果不是很理想，最终此方案被 **pass** 掉了。方案二是我实际工作中使用的，回弹效果得到了一定的改善。体验效果较方案一有了很大的提升。
如果页面有微信授权，以及页面路径的跳转，此时 **iOS** 端微信打开的网页底部会多出一个导航条，同样 **Android** 端微信不会出现类似导航条。若没有微信授权以及页面跳转，则两方案均可选；若有微信授权，推荐使用方案二。