• 解决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;
                 200px;
                height: 30px;
                border: 1px solid #ccc;
                display: block;
            }
            .next {
                 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;
                 200px;
                height: 30px;
                border: 1px solid #ccc;
                display: block;
            }
            .next {
                 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>
  • 相关阅读:
    PSFTP使用简单教程
    JavaMail应用--通过javamail API实现在代码中发送邮件功能
    java常用数据类型转换
    自己封装的Java excel数据读取方法
    java怎样实现重载一个方法
    怎样做好测试保证交付产品质量
    软件测试之测试用例颗粒度问题
    Python 一句命令启动一个web服务器
    ansible 模块之在学习--lineinfile
    centos 7 安装sql 审核工具 inception + archer
  • 原文地址:https://www.cnblogs.com/jquery37/p/4404825.html
Copyright © 2020-2023  润新知