問題描述:因爲微信遊覽器存在回彈機制,在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測試會出現,在較低版本又不會。測試