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

在移动端的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页面,软键盘弹出,输入框被遮住

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

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

相关推荐