解决IOS下不支持fixed的问题

浏览数：22 / 时间：2015年06月11日

我们公司有一个页面底部用到了fixed样式，每当弹出键盘的时候，IOS下fixed就会走样(据我所知android没有该问题)。

技术分享

为此之前我经过产品的同意做了简单的处理（方法1）。

方法一：

focus的时候让fixed块position变为relative，这是最简单的处理方法。

下面是我的小demo

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .input {
            margin:10px 10px 400px 10px;
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            display: block;
        }
        .next {
            width: 100%;
            height: 44px;
            line-height: 44px;
            background: orangered;
            position: fixed;
            bottom:0;
            color:#fff;
            text-align: center;
        }
        .pos-rel {
            position: relative;;
        }
    </style>
    <script src="../js/zepto.js"></script>
</head>
<body>
<section class="content">

    <input class="input" type="text" />
    <input class="input" type="text" />
    <input class="input" type="text" />

    <div class="next">
        下一步
    </div>
</section>

<script>
    $(function() {
        var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);

        if (isIOS) {
            $(‘.content‘).on(‘focus‘, ‘input‘, function () {
                $(‘.next‘).addClass(‘pos-rel‘);
            }).on(‘focusout‘, ‘input‘, function () {
                $(‘.next‘).removeClass(‘pos-rel‘);
             });
        }
    });
</script>
</body>
</html>

方法二：

position：absolute；每次滚动的时候重新算位置。

下面是我的小demo，touch的时候作了隐藏处理，input focusout和window resize的时候作了fixed位置重新计算。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .input {
            margin:10px 10px 400px 10px;
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            display: block;
        }
        .next {
            width: 100%;
            height: 44px;
            line-height: 44px;
            background: orangered;
            position: absolute;
            color:#fff;
            text-align: center;
        }
        .pos-rel {
            position: relative;;
        }
    </style>
    <script src="../js/zepto.js"></script>
</head>
<body>
    <input class="input" type="text" />
    <input class="input" type="text" />
    <input class="input" type="text" />

    <div class="next">
        下一步
    </div>
</body>
<script>
    var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);

    var likeFixed = function() {
        //解绑resize事件  以免进入死循环
        $(window).unbind(‘resize‘, likeFixed);

        var t = document.documentElement.scrollTop || document.body.scrollTop, fixed_height = 44, top;

        //网页可见高度加上滚动条高度  - fixed元素的高度
        top = window.innerHeight+ t - fixed_height;
        //设置fixed div的top
        $(‘.next‘).css({‘top‘: top+‘px‘ });

        //重新绑定resize事件
        setTimeout(function() {
            $(window).bind(‘resize‘, likeFixed);
        }, 10);
    }

    $(function() {
        if (isIOS) {
            likeFixed();
            function touchstart(event) {
                $(‘.next‘).css(‘opacity‘,0);
            }
            function touchend(event) {
                $(‘.next‘).css(‘opacity‘,1);
            }
            //touch的时候隐藏
            document.addEventListener("touchstart", touchstart, false);
            //滚动后重新设置fixed div的位置
            window.onscroll = likeFixed;
            //touch后显示
            document.addEventListener("touchend", touchend, false);
        }

        //所有input blur时重新计算位置，兼容chrome
        $(‘body‘).on(‘focusout‘, ‘input‘, likeFixed);
    });

</script>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

解决IOS下不支持fixed的问题