處理iOS微信H5頁面橡皮回彈效果

🐱業務需求

近期開發的項目有一部分是與微信公衆號相關的H5頁面，在Android端微信上頁面效果展現無異常，可是在 iOS端 微信多多少少會出現一些意想不到的bug。這次主要針對移動端H5頁面在iOS端產生的 橡皮回彈（橡皮筋效果）問題作一下相關記錄，但願對遇到相似問題的同窗有所幫助。css

🐕方案一：使用 inobounce.js

inobounce.js github地址

在 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>
複製代碼

🐒 方案二：CSS樣式處理（推薦）

偶然間在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