iOS微信H5頁面橡皮回彈效果的踩坑記錄
近期開發(fā)的項目有一部分是與微信公眾號相關(guān)的H5頁面，在Android端微信上頁面效果展示無異常，但是在 iOS端 微信多多少少會出現(xiàn)一些意想不到的bug。此次主要針對移動端H5頁面在iOS端產(chǎn)生的 橡皮回彈（橡皮筋效果）問題做一下相關(guān)記錄，希望對遇到類似問題的同學有所幫助。
🐕方案一：使用 inobounce.jsinobounce.js github地址
在 html主頁面 的 header 標簽中引入 inbounce.js，即 。當引入此文件之后，iOS端整個頁面都無法滑動或滾動，若想滾動的元素能夠?qū)崿F(xiàn)滾動效果，則需要對滾動區(qū)域設置固定的高度，即 height、max-height，同時也要設置 overflow: auto，實現(xiàn)頁面滑動。為防止iOS端頁面滾動發(fā)生卡頓現(xiàn)象，需要對滾動區(qū)域設置 -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='http://www.intensediesel.com/bcjs/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活動頁，沒有產(chǎn)生所謂的橡皮回彈效果，于是就想著是否可以采用此效果來解決iOS端網(wǎng)頁產(chǎn)生的橡皮回彈效果。最終嘗試此方法可以實現(xiàn)iOS端頁面固定，不產(chǎn)生橡皮回彈效果。在系統(tǒng)版本iOS13+上的設備上已解決橡皮筋效果，系統(tǒng)版本iOS12+的設備上沒有嘗試，后續(xù)準備找iOS12+的蘋果手機進行進一步的測試，其次再將測試結(jié)果進行補充。
<!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;}/* 超出滾動 */#app {width: 100%;height: 100%;overflow-y: auto;}🐬總結(jié)：
總的來說，兩種方案我在實際開發(fā)中都進行了嘗試。方案一在微信中瀏覽H5網(wǎng)頁時可以完美解決橡皮回彈效果；當H5頁面在iOS端微信授權(quán)跳轉(zhuǎn)時，底部會有一個導航條，此時導航條也有可能被遮蓋，點擊導航條兩端的按鈕沒有反應。在Safari瀏覽器打開H5頁面時，網(wǎng)頁的頂端地址欄和底部菜單欄會有一定的遮擋，體驗效果不是很理想，最終此方案被pass掉了。方案二是我實際工作中使用的，回彈效果得到了一定的改善。體驗效果較方案一有了很大的提升。
如果頁面有微信授權(quán)，以及頁面路徑的跳轉(zhuǎn)，此時iOS端微信打開的網(wǎng)頁底部會多出一個導航條，同樣Android端微信不會出現(xiàn)類似導航條。若沒有微信授權(quán)以及頁面跳轉(zhuǎn)，則兩方案均可選；若有微信授權(quán)，推薦使用方案二。
到此這篇關(guān)于iOS微信H5頁面橡皮回彈效果的文章就介紹到這了,更多相關(guān)iOS微信H5頁面橡皮回彈內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 微信頭像換了對方怎么還顯示原來的2. 通過Java 程序獲取Word中指定圖片的坐標位置3. 怎么把PDF文件轉(zhuǎn)換成Excel？嗨格式PDF轉(zhuǎn)換器輕松幫你實現(xiàn)！4. 花粉俱樂部打不開進不去怎么回事？花粉俱樂部加載數(shù)據(jù)失敗怎么解決？5. 拼多多怎么查看消費總額6. 360軟件管家怎么將酷狗音樂卸載？卸載酷狗音樂操作步驟7. 微信為什么要帳號改為賬號8. 夸克網(wǎng)頁連接失敗是什么原因 夸克網(wǎng)頁連接失敗解決辦法9. 美團怎么設置不讓別人看我記錄10. 羊了個羊第四關(guān)通關(guān)截圖攻略圖片 羊了個羊第四關(guān)怎么過
網(wǎng)公網(wǎng)安備