iOS橡皮筋回弹

处理iOS端橡皮回弹效果

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

方案一:使用 inobounce.js

  • inobounce.js github地址

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


<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>inobouncetitle>
		<scr

你可能感兴趣的:(iOS橡皮筋回弹)