问题描述:因为微信游览器存在回弹机制,在html body下拉滚动的时候会把整个页面下拉出现由XXX提供字眼javascript
问题复现:css
解决思路:把整个html或者body用flex固定在浏览器的可视区域范围内,内容区域滚动的话须要使用滚动插件,在这里我用的是mui的滚动组件,若是使用overflow: auto是不会滚动的html
代码:java
css样式ios
<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>
实现效果app
小瑕疵是:从顶部向下滑动 停留一下会出现底部空白,前提是有滚动区域,在ios12.1.4测试会出现,在较低版本又不会。测试