zoukankan      html  css  js  c++  java
  • IOS中弹出键盘后出现fixed失效现象的解决方案

    概述

    这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上,页面超过屏幕大小时候输入框focus状态下(键盘弹出)绝对定位的元素失效,导致页面滚动时候把定位元素一并带走,体验十分不好,在此留下一自己的方法,让更多的人不需要再爬这样的小坑。

    解决方法

    原理很简单,就是定义一个外框把页面包起来,把需要使用fixed定位的元素设置成absolute定位,然后设置外框元素的样式为overflow-y:scroll即可,下面是实例:
    假设外框元素为.wrap,需要fixed定位的元素为.position

    DOM

    <html>
        <body>
            <div class=".wrap">
                <div class=".position"></div>
            </div>
        </body>
    </html>

    CSS

    html, body, .wrap {
         100%;
        height: 100%;
    }
    .wrap {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; //因为使用overflow滚动体验不如正常的页面滚动,加上这个样式以后滚动即会变得顺滑
    }
    .position {
        position: absolute;
    }

    注释

    其实这个问题有很多插件可以解决,但是个人认为有时候不是非用插件不可的情况下没必要使用插件,一是影响页面性能,二是我有代码洁癖可以吗?
    好吧开个玩笑~想必看到这里问题已经解决了,如果没有请在下方留言,很欢迎大家参与交流,互相学习。

  • 相关阅读:
    python基础(5)
    python基础(4)
    python基础(3)
    python基础(2)
    第一个python程序(2)
    第一个python教程(1)
    【jQuery】
    【JavaScript】
    【练习】HTML+CSS
    【练习】Html
  • 原文地址:https://www.cnblogs.com/10manongit/p/12634604.html
Copyright © 2011-2022 走看看