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

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

问题复现:

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

解决思路:把整个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>

实现效果
《flex禁止ios微信浏览器回弹机制》

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

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

    原文作者:我在神游
    原文地址: https://segmentfault.com/a/1190000018597987
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞