最近一段时间都在做基于微信的一些推广、宣传的H5页面的开发，所以开个帖来总结一下遇到的一些问题。
一、微信H5在IOS中出现滚动不流畅的问题
-webkit-overflow-scrolling : touch;
二、css隐藏滚动条
::-webkit-scrollbar{
display:none; // 大部分机型上生效，ios上无效
width:0 !important; // chrome 和 safari
}
-ms-overflow-style:none; // IE10+
overflow:-moz-scrollerbars-none; // firefox
备注:这种做法在ios上无效。
三、锁屏或者后台运行微信时，背景音乐仍在播放
visibilitychange 事件。visibilitychange事件在锁屏或者切换后台运行微信时都会触发。
document.hidden 属性。document.hidden属性记录当前文档是否隐藏。
document.addEventListener("visibilitychange",()=>{
if(document.hidden){ // 如果锁屏或者后台运行，暂停背景音乐
bg.stop()
}else{
this.fallBackPlay(); // 如果不是，回弹之前的状态。
}
});
四、使用vue-router时，用push()进行路由导航，ios手机底部出现地址导航栏
目前没有找到更好的解决方法。
如果需要使用vue-router进行路由管理，可以使用replace()方法代替。
replace()不记录地址历史，所以微信不会出现地址历史导航记录。
五、<input>标签在flex布局中不能自适应
在<input>标签外包一个div，div的flex设为1，<input>的width设为100%。
六、轨迹运动
元素沿轨迹运动可以通过offset-path和offset-distance实现。
七、点击input元素聚焦，元素没有出现在可视区域
//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法
window.addEventListener("resize", function() {
if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
使用scrollIntoViewIfNeeded 和 scrollIntoView 方法。
