解决IOS下不支持fixed的问题

我们公司有一个页面底部用到了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>
复制代码

 

 

以上是我的处理方法，也许存在不足之处，欢迎大家提出宝贵意见，一起交流。

posted @   skyweaver  阅读(2482)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae