最近一段時(shí)間都在做基于微信的一些推廣盅视、宣傳的H5頁(yè)面的開發(fā)弱恒，所以開個(gè)帖來總結(jié)一下遇到的一些問題。
一烘跺、微信H5在IOS中出現(xiàn)滾動(dòng)不流暢的問題
-webkit-overflow-scrolling : touch;
二湘纵、css隱藏滾動(dòng)條
::-webkit-scrollbar{
display:none; // 大部分機(jī)型上生效，ios上無(wú)效
width:0 !important; // chrome 和 safari
}
-ms-overflow-style:none; // IE10+
overflow:-moz-scrollerbars-none; // firefox
備注:這種做法在ios上無(wú)效滤淳。
三梧喷、鎖屏或者后臺(tái)運(yùn)行微信時(shí)，背景音樂仍在播放
visibilitychange 事件。visibilitychange事件在鎖屏或者切換后臺(tái)運(yùn)行微信時(shí)都會(huì)觸發(fā)铺敌。
document.hidden 屬性汇歹。document.hidden屬性記錄當(dāng)前文檔是否隱藏。
document.addEventListener("visibilitychange",()=>{
if(document.hidden){ // 如果鎖屏或者后臺(tái)運(yùn)行偿凭，暫停背景音樂
bg.stop()
}else{
this.fallBackPlay(); // 如果不是产弹，回彈之前的狀態(tài)。
}
});
四笔喉、使用vue-router時(shí)取视，用push()進(jìn)行路由導(dǎo)航硝皂，ios手機(jī)底部出現(xiàn)地址導(dǎo)航欄
目前沒有找到更好的解決方法常挚。
如果需要使用vue-router進(jìn)行路由管理，可以使用replace()方法代替稽物。
replace()不記錄地址歷史奄毡，所以微信不會(huì)出現(xiàn)地址歷史導(dǎo)航記錄。
五贝或、<input>標(biāo)簽在flex布局中不能自適應(yīng)
在<input>標(biāo)簽外包一個(gè)div吼过，div的flex設(shè)為1，<input>的width設(shè)為100%咪奖。
六盗忱、軌跡運(yùn)動(dòng)
元素沿軌跡運(yùn)動(dòng)可以通過offset-path和offset-distance實(shí)現(xiàn)。
七羊赵、點(diǎn)擊input元素聚焦趟佃，元素沒有出現(xiàn)在可視區(qū)域
//微信內(nèi)置瀏覽器瀏覽H5頁(yè)面彈出的鍵盤遮蓋文本框的解決辦法
window.addEventListener("resize", function() {
if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
使用scrollIntoViewIfNeeded 和 scrollIntoView 方法。
