首页 > 怎样在移动端的导航栏布局上解决通常position:fixed;写法带来在出现虚拟键盘时产生的bug

怎样在移动端的导航栏布局上解决通常position:fixed;写法带来在出现虚拟键盘时产生的bug

之前用了 iscrool.js 来解决这个问题,但是我突然又觉得单为了这么个问题而专门引用个框架,有点“大动干戈”,不知各位有什么好方法?


其他的我还太清楚,我自己一般是这样处理的:通过absolute代替fixed。如果还有软键盘遮盖掉了输入框,那么可以用一下下面的这个方法。输入框获取焦点后,手动的调整滚动条的位置。参考代码如下(我用到了zepto/jquery):

<input type="text" data-make="doScroll" class="insertInput" placeholder="请输地址">

$("input").focus(function(){
        //获取值
        var makeDo = $(this).attr("data-make");

        //事件适配器
        var doSomething = {
            "doScroll":changeInputScroll
        };

        if ( makeDo && doSomething.hasOwnProperty(makeDo) ) {
            doSomething[makeDo]($(this),$("#mainCon"));
        }
    });

    //获取焦点的时候,动态的改变滚动条的位置
    function changeInputScroll($input,$con){
        var viewTop     = $con[0].scrollTop,//当前的滚动条高度
            viewBottom  = viewTop + $con[0].innerHeight,//当前容器的高度
            viewShowTop = $con.offset().top;//当前视口的位置

        var elementTop    = $input.offset().top, //当前对象,在页面中的位置
            elementBottom = elementTop + $input.height() - viewShowTop;//要移动的距离
        //设置滚动条位置
        $con.scrollTop(elementBottom);
    }

楼主可以参考这篇博客:Web移动端Fixed布局的解决方案

【热门文章】
【热门文章】