iOS微信H5页面橡皮回弹效果的踩坑记录

更新时间：2021年07月15日 10:05:29 作者：下落香樟树

移动端开发时,H5长页面在iOS系统中滑动时,当页面滑动到顶部或底部时,页面还能够上滑或下滑,手指离开屏幕后回弹,这就时橡皮筋效果,这篇文章主要给大家介绍了关于iOS微信H5页面橡皮回弹效果的相关资料,需要的朋友可以参考下

业务需求

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

🐕方案一：使用 inobounce.js

inobounce.js github地址

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

<!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>

🐒 方案二：CSS样式处理（推荐）

偶然间在iOS端打开一些公众号的H5活动页，没有产生所谓的橡皮回弹效果，于是就想着是否可以采用此效果来解决iOS端网页产生的橡皮回弹效果。最终尝试此方法可以实现iOS端页面固定，不产生橡皮回弹效果。在系统版本iOS13+上的设备上已解决橡皮筋效果，系统版本iOS12+的设备上没有尝试，后续准备找iOS12+的苹果手机进行进一步的测试，其次再将测试结果进行补充。

<!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代码：

/* 初始化 */
* {
	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端微信不会出现类似导航条。若没有微信授权以及页面跳转，则两方案均可选；若有微信授权，推荐使用方案二。

到此这篇关于iOS微信H5页面橡皮回弹效果的文章就介绍到这了,更多相关iOS微信H5页面橡皮回弹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

微信小程序实现表单验证提交功能
这篇文章主要为大家详细介绍了微信小程序实现表单验证提交功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js实现文本框支持加减运算的方法
这篇文章主要介绍了js实现文本框支持加减运算的方法,可实现文本框输入加减运算式同时右侧实时显示对应计算结果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
基于JS实现简单的随机抽取幸运员工系统
这篇文章主要为大家详细介绍了基于HTML+JavaScript实现简单的随机抽取幸运员工系统,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
2023-11-11
微信小程序制作扭蛋机代码实例
这篇文章主要介绍了微信小程序制作扭蛋机代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JS 添加删除元素的实现代码
JS添加删除元素，非常不错的应用，需要的朋友可以参考下。
2009-08-08
详解如何较好的使用js
本文将对在网页中引用js常会出现的问题进行汇总，并提出解决问题的具体方案，有助于我们更好的学习和使用js，需要的朋友一起来看下吧
2016-12-12
javascript利用控件对windows的操作实现原理与应用
假如要发送汉字的聊天框的内容的话，我们也要从windows消息机制下手，先找到聊天消息的句柄（可以利用findwindow函数或者用spy工具哈），然后在找到上面的聊天框的句柄，接着我们就可以想这个句柄发送WM_SETTEXT的消息了
2012-12-12
webpack 模块热替换原理
这篇文章主要介绍了webpack 模块热替换原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
关于json字符串与实体之间的严格验证代码
在一个项目中要求严格验证传入的json字符串与定义的类匹配，否则不记录。后来查了好多资料才弄明白，下面小编给大家分享下关于json字符串与实体之间的严格验证，感兴趣的朋友一起看看吧
2016-11-11
document.write()及其输出内容的样式、位置控制
document.write（），用于简单的打印内容到页面上，可以逐字打印你需要的内容，既然可以输出变量，肯定会想要去控制下变量的显示，比如位置以及样式
2013-08-08