- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- iOS微信H5頁(yè)面橡皮回彈效果的踩坑記錄
近期開(kāi)發(fā)的項目有一部分是與微信公眾號相關(guān)的H5頁(yè)面，在A(yíng)ndroid端微信上頁(yè)面效果展示無(wú)異常，但是在 iOS端 微信多多少少會(huì )出現一些意想不到的bug。此次主要針對移動(dòng)端H5頁(yè)面在iOS端產(chǎn)生的 橡皮回彈（橡皮筋效果）問(wèn)題做一下相關(guān)記錄，希望對遇到類(lèi)似問(wèn)題的同學(xué)有所幫助。
inobounce.js
在 html主頁(yè)面 的 header 標簽中引入 inbounce.js，即 。當引入此文件之后，iOS端整個(gè)頁(yè)面都無(wú)法滑動(dòng)或滾動(dòng)，若想滾動(dòng)的元素能夠實(shí)現滾動(dòng)效果，則需要對滾動(dòng)區域設置固定的高度，即 height、max-height，同時(shí)也要設置 overflow: auto，實(shí)現頁(yè)面滑動(dòng)。為防止iOS端頁(yè)面滾動(dòng)發(fā)生卡頓現象，需要對滾動(dòng)區域設置 -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>
偶然間在iOS端打開(kāi)一些公眾號的H5活動(dòng)頁(yè)，沒(méi)有產(chǎn)生所謂的橡皮回彈效果，于是就想著(zhù)是否可以采用此效果來(lái)解決iOS端網(wǎng)頁(yè)產(chǎn)生的橡皮回彈效果。最終嘗試此方法可以實(shí)現iOS端頁(yè)面固定，不產(chǎn)生橡皮回彈效果。在系統版本iOS13+上的設備上已解決橡皮筋效果，系統版本iOS12+的設備上沒(méi)有嘗試，后續準備找iOS12+的蘋(píng)果手機進(jìn)行進(jìn)一步的測試，其次再將測試結果進(jìn)行補充。
<!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;
}
/* 超出滾動(dòng) */
#app {
width: 100%;
height: 100%;
overflow-y: auto;
}
總的來(lái)說(shuō)，兩種方案我在實(shí)際開(kāi)發(fā)中都進(jìn)行了嘗試。方案一在微信中瀏覽H5網(wǎng)頁(yè)時(shí)可以完美解決橡皮回彈效果；當H5頁(yè)面在iOS端微信授權跳轉時(shí)，底部會(huì )有一個(gè)導航條，此時(shí)導航條也有可能被遮蓋，點(diǎn)擊導航條兩端的按鈕沒(méi)有反應。在Safari瀏覽器打開(kāi)H5頁(yè)面時(shí)，網(wǎng)頁(yè)的頂端地址欄和底部菜單欄會(huì )有一定的遮擋，體驗效果不是很理想，最終此方案被pass掉了。方案二是我實(shí)際工作中使用的，回彈效果得到了一定的改善。體驗效果較方案一有了很大的提升。
如果頁(yè)面有微信授權，以及頁(yè)面路徑的跳轉，此時(shí)iOS端微信打開(kāi)的網(wǎng)頁(yè)底部會(huì )多出一個(gè)導航條，同樣Android端微信不會(huì )出現類(lèi)似導航條。若沒(méi)有微信授權以及頁(yè)面跳轉，則兩方案均可選；若有微信授權，推薦使用方案二。
到此這篇關(guān)于iOS微信H5頁(yè)面橡皮回彈效果的文章就介紹到這了,更多相關(guān)iOS微信H5頁(yè)面橡皮回彈內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
