近期开发的项目有一部分是与微信公众号相关的H5页面,在Android端微信上页面效果展现无异常,可是在 iOS端 微信多多少少会出现一些意想不到的bug。这次主要针对移动端H5页面在iOS端产生的 橡皮回弹(橡皮筋效果)问题作一下相关记录,但愿对遇到相似问题的同窗有所帮助。css
在 html主页面 的 header 标签中引入 inbounce.js,即 。当引入此文件以后,iOS端整个页面都没法滑动或滚动,若想滚动的元素可以实现滚动效果,则须要对滚动区域设置固定的高度,即 height、max-height,同时也要设置 overflow: auto,实现页面滑动。为防止iOS端页面滚动发生卡顿现象,须要对滚动区域设置 -webkit-overflow-scrolling: touch 属性。 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inobounce</title>
<script src="inobounce.js"></script>
<style> ul { height: 115px; border: 1px solid gray; overflow: auto; -webkit-overflow-scrolling: touch; } </style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</body>
</html>
复制代码
偶然间在iOS端打开一些公众号的H5活动页,没有产生所谓的橡皮回弹效果,因而就想着是否能够采用此效果来解决iOS端网页产生的橡皮回弹效果。最终尝试此方法能够实现iOS端页面固定,不产生橡皮回弹效果。在系统版本iOS13+上的设备上已解决橡皮筋效果,系统版本iOS12+的设备上没有尝试,后续准备找iOS12+的苹果手机进行进一步的测试,其次再将测试结果进行补充。git
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iOS橡皮回弹</title>
</head>
<body>
<!-- 内容区 -->
<div id="app"></div>
</body>
</html>
复制代码
主要CSS代码:github
/* 初始化 */
* {
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端微信不会出现相似导航条。若没有微信受权以及页面跳转,则两方案都可选;如有微信受权,推荐使用方案二。web