快捷導(dǎo)航

iOS微信H5頁面橡皮回彈效果的踩坑記錄

更新時(shí)間：2021年07月15日 10:05:29 作者：下落香樟樹

移動(dòng)端開發(fā)時(shí),H5長頁面在iOS系統(tǒng)中滑動(dòng)時(shí),當(dāng)頁面滑動(dòng)到頂部或底部時(shí),頁面還能夠上滑或下滑,手指離開屏幕后回彈,這就時(shí)橡皮筋效果,這篇文章主要給大家介紹了關(guān)于iOS微信H5頁面橡皮回彈效果的相關(guān)資料,需要的朋友可以參考下

業(yè)務(wù)需求

近期開發(fā)的項(xiàng)目有一部分是與微信公眾號(hào)相關(guān)的H5頁面，在Android端微信上頁面效果展示無異常，但是在 iOS端微信多多少少會(huì)出現(xiàn)一些意想不到的bug。此次主要針對(duì)移動(dòng)端H5頁面在iOS端產(chǎn)生的橡皮回彈（橡皮筋效果）問題做一下相關(guān)記錄，希望對(duì)遇到類似問題的同學(xué)有所幫助。

🐕方案一：使用 inobounce.js

inobounce.js github地址

在 html主頁面的 header 標(biāo)簽中引入 inbounce.js，即。當(dāng)引入此文件之后，iOS端整個(gè)頁面都無法滑動(dòng)或滾動(dòng)，若想滾動(dòng)的元素能夠?qū)崿F(xiàn)滾動(dòng)效果，則需要對(duì)滾動(dòng)區(qū)域設(shè)置固定的高度，即 height、max-height，同時(shí)也要設(shè)置 overflow: auto，實(shí)現(xiàn)頁面滑動(dòng)。為防止iOS端頁面滾動(dòng)發(fā)生卡頓現(xiàn)象，需要對(duì)滾動(dòng)區(qū)域設(shè)置 -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端打開一些公眾號(hào)的H5活動(dòng)頁，沒有產(chǎn)生所謂的橡皮回彈效果，于是就想著是否可以采用此效果來解決iOS端網(wǎng)頁產(chǎn)生的橡皮回彈效果。最終嘗試此方法可以實(shí)現(xiàn)iOS端頁面固定，不產(chǎn)生橡皮回彈效果。在系統(tǒng)版本iOS13+上的設(shè)備上已解決橡皮筋效果，系統(tǒng)版本iOS12+的設(shè)備上沒有嘗試，后續(xù)準(zhǔn)備找iOS12+的蘋果手機(jī)進(jìn)行進(jìn)一步的測(cè)試，其次再將測(cè)試結(jié)果進(jìn)行補(bǔ)充。

<!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>
		<!-- 內(nèi)容區(qū) -->
		<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;
}
/* 超出滾動(dòng) */
#app {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

🐬總結(jié)：

總的來說，兩種方案我在實(shí)際開發(fā)中都進(jìn)行了嘗試。方案一在微信中瀏覽H5網(wǎng)頁時(shí)可以完美解決橡皮回彈效果；當(dāng)H5頁面在iOS端微信授權(quán)跳轉(zhuǎn)時(shí)，底部會(huì)有一個(gè)導(dǎo)航條，此時(shí)導(dǎo)航條也有可能被遮蓋，點(diǎn)擊導(dǎo)航條兩端的按鈕沒有反應(yīng)。在Safari瀏覽器打開H5頁面時(shí)，網(wǎng)頁的頂端地址欄和底部菜單欄會(huì)有一定的遮擋，體驗(yàn)效果不是很理想，最終此方案被pass掉了。方案二是我實(shí)際工作中使用的，回彈效果得到了一定的改善。體驗(yàn)效果較方案一有了很大的提升。

如果頁面有微信授權(quán)，以及頁面路徑的跳轉(zhuǎn)，此時(shí)iOS端微信打開的網(wǎng)頁底部會(huì)多出一個(gè)導(dǎo)航條，同樣Android端微信不會(huì)出現(xiàn)類似導(dǎo)航條。若沒有微信授權(quán)以及頁面跳轉(zhuǎn)，則兩方案均可選；若有微信授權(quán)，推薦使用方案二。

到此這篇關(guān)于iOS微信H5頁面橡皮回彈效果的文章就介紹到這了,更多相關(guān)iOS微信H5頁面橡皮回彈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！