flex禁止ios微信浏览器回弹机制

共计 1446 个字符，预计需要花费 4 分钟才能阅读完成。

问题描述：由于微信游览器存在回弹机制，在 html body 下拉滚动的时候会把整个页面下拉出现由 XXX 提供字眼
问题复现：

解决思路：把整个 html 或者 body 用 flex 固定在浏览器的可视区域范围内，内容区域滚动的话需要使用滚动插件，在这里我用的是 mui 的滚动组件，如果使用 overflow: auto 是不会滚动的
代码：
css 样式
<style>
html {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body {
height: 100%;
}
.scrollBox {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
width: 100px;
overflow: hidden;
}
</style>

html 结构
<div class=”mui-scroll-wrapper scrollBox “>
<div class=”mui-scroll”>
<!– 这里放置真实显示的 DOM 内容 –>
<ul class=”mui-table-view my-li “>
<li class=”mui-table-view-cell”>Item 1</li>
<li class=”mui-table-view-cell”>Item 2</li>
<li class=”mui-table-view-cell”>Item 3</li>
<li class=”mui-table-view-cell”>Item 1</li>
<li class=”mui-table-view-cell”>Item 2</li>
<li class=”mui-table-view-cell”>Item 3</li>
<li class=”mui-table-view-cell”>Item 1</li>
<li class=”mui-table-view-cell”>Item 2</li>
<li class=”mui-table-view-cell”>Item 3</li>
<li class=”mui-table-view-cell”>Item 1</li>
<li class=”mui-table-view-cell”>Item 2</li>
<li class=”mui-table-view-cell”>Item 3</li>
<li class=”mui-table-view-cell”>Item 1</li>
<li class=”mui-table-view-cell”>Item 2</li>
<li class=”mui-table-view-cell”>Item 3</li>
<li class=”mui-table-view-cell”>Item 1</li>
<li class=”mui-table-view-cell”>Item 2</li>
<li class=”mui-table-view-cell”>Item 3</li>
</ul>
</div>
</div>

js 初始化滚动组件
<script type=”text/javascript”>
mui(‘.mui-scroll-wrapper’).scroll({
deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006
indicators:false, // 是否显示滚动条
});
</script>

实现效果
小瑕疵是：从顶部向下滑动 停留一下会出现底部空白，前提是有滚动区域，在 ios12.1.4 测试会出现，在较低版本又不会。