iOS微信H5页面橡皮回弹效果实现过程中有哪些常见问题及解决方法？

本文共计966个文字，预计阅读时间需要4分钟。

业务需求+近期开发的项目中，有一部分是与微信公众号相关的H5页面。在Android端微信上页面效果展示无异常，但在iOS端+微信上，偶尔会出现一些意想不到的bug。本次主要针对移动端H5页面。

业务需求

近期开发的项目有一部分是与微信公众号相关的H5页面，在Android端微信上页面效果展示无异常，但是在iOS端 微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。

🐕方案一：使用 inobounce.js

inobounce.jsgithub地址

在html主页面的 header 标签中引入 inbounce.js，即 。当引入此文件之后，iOS端整个页面都无法滑动或滚动，若想滚动的元素能够实现滚动效果，则需要对滚动区域设置固定的高度，即 height、max-height，同时也要设置 overflow: auto，实现页面滑动。为防止iOS端页面滚动发生卡顿现象，需要对滚动区域设置 -webkit-overflow-scrolling: touch 属性。