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); // 我觉得好看
}
