ios页面overflow:scroll;滚动不流畅及手机web页面，软键盘弹出，输入框被遮住

xuweinet

2019-06-21

在移动端的web开发中，大家会发现，当给一个元素设置overflow:sroll;属性时，在ios端滑动页面，页面滚动的反应很慢，有种卡顿的感觉，但是在安卓端滚动很快，于是这时就有人想到用iscroll.js插件，让页面中有overflow:scroll;属性的元素在ios端和安卓端滚动的都很流畅，是的，这可以解决问题，元素滚动也很流畅，但是，iscroll.js的也经常伴随着很多问题。例如，他会屏蔽页面上的很多点击事件和input框输入问题等等。当然这些都可以解决，但是弊端很多。于是乎，就有了-webkit-overflow-scrolling:touch;属性，来解决ios端带有overflow:sroll;属性的元素，让其滚动很流畅。记住，-webkit-overflow-scrolling: touch;属性要写在有overflow:sroll;属性的元素的样式里。

有时页面里的一个div给他写了固定的高度，也写了overflow:scroll;属性，并且这个div里有很多input输入框，当我点击某一个input时，软键盘弹出，input输入框在安卓端不会自动顶上去，这时测试就会给你提bug了，这就很麻烦了。于是乎，我就写了一个自己的方法，让安卓端的input框自动顶上去，因为在安卓有这个情况，所以做了终端判断，以下代码仅供参考：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Document</title>
    <script>
        /*动态计算html的font-size*/
        //自己的写法
        window.onload = function(){
            getRem(720,100)
        };
        window.onresize = function(){
            getRem(720,100)
        };
        function getRem(pwidth,prem){
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth/pwidth*prem + "px";
        }
    </script>
    <link rel="stylesheet" type="text/css" href="../css/reset-min.css">
    <style>
        html,body{height:100%;}
        .absolutewrapper{position:relative;width:100%;height:100%;}
        .absolutewrapperslide{position:absolute;left:0;top:0;bottom:1rem;width:100%;overflow:scroll;-webkit-overflow-scrolling : touch;z-index:10000;margin:0 auto;}
        .absolutewrapperslide div{padding:0.1rem;font-size:0.32rem;border-top:0.03rem solid #efefef;}
        .absolutewrapperslide div input{padding:0.1rem;border:0.02rem solid #ddd;}
        .footer{display:block;position:absolute;bottom:0;left:0;z-index: 10001;font-size:0.32rem;background-color:#e02222;color:#fff;width:100%;height:1rem;text-align:center;line-height:1rem; }
        .text{padding:16px;text-align: center;background:#efefef;}
    </style>
</head>
<body>
<div class="absolutewrapper">
    <div class="absolutewrapperslide">
        <div class="text">
            您即将审核通过订单,请您填写结算信息
        </div>
        <div>输入姓名：<input type="text"/></div>
        <div>输入年龄：<input type="text"/></div>
        <div>输入性别：<input type="text"/></div>
        <div>输入民族：<input type="text"/></div>
        <div>输入籍贯：<input type="text"/></div>
        <div>输入现住地址：<input type="text"/></div>
        <div>输入手机：<input type="text"/></div>
        <div>输入姓名：<input type="text"/></div>
        <div>输入年龄：<input type="text"/></div>
        <div>输入性别：<input type="text"/></div>
        <div>输入民族：<input type="text"/></div>
        <div>输入籍贯：<input type="text"/></div>
        <div>输入现住地址：<input type="text"/></div>
        <div>输入手机：<input type="text"/></div>
    </div>
    <a href='javascript:void(0)' class="footer">确定</a>
</div>
</body>
<script src="../js/jquery-3.0.1.min.js" type="text/javascript"></script>
<script>
    $(function(){
        //判断访问终端
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                    iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        };
        function pso(_this){
            var _top = parseInt($(_this).offset().top);//这个_top指当前目标元素相对于当前视口(window)的顶部距离
            var scrol = $(".absolutewrapperslide").scrollTop();
            $(".absolutewrapperslide").scrollTop(scrol+_top-100);//这个100是自己定的，最后的作用是当软键盘弹出后让该目标input距离视口顶部多少距离，从而让input自动顶上去。可以根据自己的视觉感受，自定义这个值，只要input框在几乎所有的手机中都不能被软键盘遮住就可以了。
        }
        if(browser.versions.android){//如果是安卓手机则执行这个功能
            $("input").on("focusin",function(event){
                var _this = this;
                $(window).resize(function(){//当点击input框之后，视口高度发生变化，则软键盘弹出了，这时，调用pso()函数，让input顶上去。
                    pso(_this);
                })
            })
        }
    })
</script>
</html>

截图：
ios页面overflow:scroll;滚动不流畅及手机web页面，软键盘弹出，输入框被遮住