html 禁止页面回弹,flex禁止ios微信浏览器回弹机制

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

问题复现：

解决思路：把整个html或者body用flex固定在浏览器的可视区域范围内，内容区域滚动的话需要使用滚动插件，在这里我用的是mui的滚动组件，如果使用overflow: auto是不会滚动的

代码：

css样式

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;

}

html结构

• Item 1
• Item 2
• Item 3
• Item 1
• Item 2
• Item 3
• Item 1
• Item 2
• Item 3
• Item 1
• Item 2
• Item 3
• Item 1
• Item 2
• Item 3
• Item 1
• Item 2
• Item 3

js初始化滚动组件

mui('.mui-scroll-wrapper').scroll({

deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

indicators:false, //是否显示滚动条

});

实现效果

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