1.（Tips: 千萬不要用抛虏，常規(guī)頁面滾動就用body自身的滾動）在外層div限高100vh套才，內(nèi)層div增加overflow-y: auto，在safari下滾動會有許多奇奇怪怪的問題
2. position: fixed中的input框聚焦軟鍵盤彈出霜旧，IOS下會有光標(biāo)錯位問題
// IOS 9 實(shí)測有效
html, body {
-webkit-overflow-scroll: touch;
}
3. 滾動穿透問題（實(shí)測的此方法兼容性最好，兼容IOS挂据，實(shí)測iphone X也有效）
body.overflowHide {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
彈窗展開時給body增加class="overflowHide"，同時記錄
const top = window.scrollY;
動態(tài)設(shè)置top為-${top}px
彈窗收起時移除該class掷倔，設(shè)置top為0个绍，調(diào)用window.scrollTo(0, top)恢復(fù)原滾動位置
4. 兼容iphone X安全區(qū)
第一步：設(shè)置網(wǎng)頁在可視窗口的布局方式
新增 viweport-fit 屬性，使得頁面內(nèi)容完全覆蓋整個窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
只有設(shè)置了 viewport-fit=cover凛虽，才能使用 env()广恢。
第二步：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
第三步：fixed 元素的適配
// 原吸底元素增加以下樣式
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
// 加一個空的顏色塊
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background: hsla(0, 0%, 100%, 0.9); // 我覺得好看
}
