IOS中弹出键盘后出现fixed失效现象的解决方案

news/2024/6/1 20:28:58

概述

这个问题常出现在移动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 {
    width: 100%;
    height: 100%;
}
.wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; //因为使用overflow滚动体验不如正常的页面滚动,加上这个样式以后滚动即会变得顺滑
}
.position {
    position: absolute;
}

注释

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


http://www.niftyadmin.cn/n/3620864.html

相关文章

2020牛客暑期多校训练营(第一场)B-Suffix Array (后缀数组+思维)

LINK 题意 给出长度为nnn的字符串,现在每个后缀都可以生成一个对应的序列 求这nnn个后缀生成的序列按照字典序排序的顺序,从小到大输出。 由于只有两个字母a,ba,ba,b,考虑到第一个出现的字母aaa和字母bbb在序列都是数字000 所以每个后缀的前缀序列一定是01...1001...1001..…

CSS3笔记4

1.CSS3盒子模型 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>Document</title>6 <style>7 div:first-child {8 width: 200px;9 height: 200p…

linux 失败无连接 检查电缆吗

将BOOTPROTOdhcp改成 BOOTPROTOstatic 改成手动获取IP的模式 原因: 虚拟机中的Linux目前是默认设成的自动获取IP设置&#xff0c;但你的网络中没有DHCP服务&#xff0c;所以会显示“正在决定eth0的IP信息。。。失败&#xff1a;无链接。检查电缆吗&#xff1f; 【失败】”

P3469 [POI2008]BLO-Blockade(tarjan搜索树)

LINK 使用tarjantarjantarjan求出割点,显然非割点的答案是2∗(n−1)2*(n-1)2∗(n−1) 如果是割点,割掉之后,会把原图分成若干个连通块 下面的讨论暂时不计算点uuu的贡献 考虑在tarjantarjantarjan形成的dfsdfsdfs树中 uuu的儿子分别是v1,v2,v3...v_1,v_2,v_3...v1​,v2​,v…

ifconfig 工具

ifconfig 工具 ifconfig 命令常用格式 格式&#xff1a;ifconfig显示当前激活的网络接口信息。 格式&#xff1a;ifconfig {INTERFACE}显示指定网络接口的信息。比如&#xff1a;eth0, eth1。 格式&#xff1a;ifconfig -a显示所有网络接口的信息&#xff0c;无论是否激活。 格…

开学第六周.ONE(区间DP)

不知不觉已经第六周了&#xff0c;感觉什么都没学到似的&#xff0c;老师讲的东西有的我现在还没消化&#xff0c;以至于我感觉已经跟不上老师的进度&#xff0c;这其实很悲哀&#xff0c;对于DP的有些东西我还是理解不了&#xff0c;为什么这个状态转移方程可以这样写&#xf…

Expert 诊断优化系列------------------内存不够用么?

现在很多用户被数据库的慢的问题所困扰&#xff0c;又苦于花钱请一个专业的DBA成本太高。软件维护人员对数据库的了解又不是那么深入&#xff0c;所以导致问题迟迟不能解决&#xff0c;或只能暂时解决不能得到根治。开发人员解决数据问题基本又是搜遍百度各种方法尝试个遍&…

训练总结 18.7.17 暑假训练第二天

今日完成题量两道题&#xff0c;真是越来越少了。 所谓的思维题&#xff0c;实在是想不上。今天那个图形题&#xff0c;推规律只能推出一半&#xff0c;不看题解完全做不出来&#xff0c;比较凉。