flex禁止ios微信瀏覽器回彈機制

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

圖片描述

相關文章
相關標籤/搜索