1.（Tips: 千萬不要用，常規頁面滾動就用body自身的滾動）在外層div限高100vh，內層div增加overflow-y: auto，在safari下滾動會有許多奇奇怪怪的問題
2. position: fixed中的input框聚焦軟鍵盤彈出，IOS下會有光標錯位問題
// IOS 9 實測有效
html, body {
-webkit-overflow-scroll: touch;
}
3. 滾動穿透問題（實測的此方法兼容性最好，兼容IOS，實測iphone X也有效）
body.overflowHide {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
彈窗展開時給body增加class="overflowHide"，同時記錄
const top = window.scrollY;
動態設置top為-${top}px
彈窗收起時移除該class，設置top為0，調用window.scrollTo(0, top)恢復原滾動位置
4. 兼容iphone X安全區
第一步：設置網頁在可視窗口的布局方式
新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
只有設置了 viewport-fit=cover，才能使用 env()。
第二步：頁面主體內容限定在安全區域內
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); // 我覺得好看
}
