iOS微信H5頁面橡皮回彈效果的踩坑記錄
業務需求
近期開發的專案有一部分是與微信公眾號相關的H5頁面，在端微信上頁面效果展示無異常，但是在iOS端 微信多多少少會出現一些意想不到的bug。此次主要針對移動端H5頁面在iOS端產生的橡皮回彈（橡皮筋效果）問題做一下相關記錄，希望對遇到類似問題的同學有所幫助。
🐕方案一：使用 inobounce.
inobounce.js地址
在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>www.cppcns.com 🐒 方案二：樣式處理（推薦）
偶然間在iOS端開啟一些公眾號的H5活動頁，沒有產生所謂的橡皮回彈效果，於是就想著是否可以採用此效果來解決iOS端產生的橡皮回彈效果。最終嘗試此方法可以實現iOS端頁面http://www.cppcns.com固定，不產生橡皮回彈效果。在系統版本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端微信授權跳轉時，底部會有一個導航條，此時導航條也有可能被遮蓋，點選導航條兩端的按鈕沒有反應。RpNerR在Safari瀏覽http://www.cppcns.com器開啟H5頁面時，網頁的頂端位址列和底部選單欄會有一定的遮擋，體驗效果不是很理想，最終此方案被pass掉了。方案二是我實際工作中使用的，回彈效果得到了一定的改善。體驗效果較方案一有了很大的提升。
如果頁面有微信授權，以及頁面路徑的跳轉，此時iOS端微信開啟的網頁底部會多出一個導航條，同樣Android端微信不會出現類似導航條。若沒有微信授權以及頁面跳轉，則兩方案均可選；若有微信授權，推薦使用方案二。
到此這篇關於iOS微信H5頁面橡皮回彈效果的文章就介紹到這了,更多相關iOS微信H5頁面橡皮回彈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！