ios解决输入框弹出后position:fixed失效问题

最新推荐文章于 2023-08-29 10:57:51 发布
最新推荐文章于 2023-08-29 10:57:51 发布
阅读量5.1k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a32524150195/article/details/61201460
版权
最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题。position:fixed在安卓2.2以上已经实现，但是在ios8以下系统当小键盘激活时，会出现位置错位的问题。

如下图：

受到CSDN上刘华童鞋（http://my.csdn.net/liu__hua）的启发，找到了目前位置比较完美的解决方案。

<!DOCTYPE html>

<html lang="zh_cmn">

<head>

<meta charset=utf-8 />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

<title></title>

<style>

.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}

.head{top:0;}

.foot{bottom:0;}

.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}

</style>

</head>

<body>

<header class="head">顶部固定区域</header>

<article class="main"  id="wrapper">  

    <div>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

    <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

    <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

  <input type="text" value="" class="inputtext"> <br>

  <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

     content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

  </div>

</article>

<footer class="foot">底部固定区域</footer>

</body>

</html>

当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。

内容转载于：http://blog.csdn.net/liu__hua/article/details/40106595

以作记录。

 

codepsi
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iOS项目开发键盘弹出遮挡输入框问题解决方案
08-28
iOS项目开发键盘弹出遮挡输入框问题解决方案 iOS项目开发中经常出现键盘弹出遮挡输入框问题，这个问题的处理方法可以分为两部分：文本框输入完整的响应过程和键盘的弹出与收起。 首先，我们需要控制UITextField和...
解决ios h5 input输入框被输入法弹出一块区域的问题
08-27
解决ios h5 input输入框被输入法弹出一块区域的问题 一、问题背景 在ios系统中，使用h5开发的input输入框时，输入法弹出时，会出现输入框被弹出一块区域的问题。这是一个常见的问题，对于开发者来说，解决这个问题...
iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
Cool的博客
09-04 6619
做touchweb开发的时候，做头疼的是，电脑上面时候好的，有些手机上面也是好的，个别手机和浏览器出现问题，对于这些，只能慢慢调试，找问题。 今天说一下比较老的IOS的问题，那就是“iOS下的 Fixed + Input 调用键盘的时候fixed无效问题”。 案例如下 &lt;body class="layout-fixed"&gt; &lt;!-- fixed定位的头部 --&g...
iOS 下键盘唤出后，fixed 元素失效
屠苏的小笔记
03-15 3212
iOS大bug 遮罩一般要充满全屏，做好的办法就是设置容器position: fixed; 但是如果遮罩上面的弹框需要输入弹出键盘的话，这时fixed就失效了，比如这种情况： 键盘已经挡到了弹框，如果是fixed在底部的话，键盘唤起的时候，输入框并不会如期的在键盘顶部，而是不知道跑哪去了。。。。解题思路iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如页面不
解决fixed属性在ios软键盘弹出后失效的bug
08-19 586
　　这周在做空间（“类似”qq空间）项目。首页是好友发表的说说，可以针对每条说说进行评论，评论框吸附固定在屏幕底部。此时，Bug来了...在ios上，软键盘弹出后fixed属性失效了。后来发现，ios绝大部分情况把fixed变成了absolute。为什么说是绝大部分情况下而不是100%，后面会提到。下面介绍2种方案... 1、css布局（推荐） 　　解决思路：既然在 iOS ...
Ios端，软键盘弹起时，顶部导航栏fixed失效
RRRRRDong的博客
09-16 1363
最近写vue移动端项目时，遇到这么一个bug 在下拉框输入数据时，ios的软键盘弹出以后，顶部导航栏的fixed元素失效，当下拉列表元素超过一页时，再往下滑动，失效的fixed元素也会滚动下来。
移动端底部fixed定位input输入框被软键盘遮挡解决办法
最新发布
細水、長流√的专栏
08-29 1261
移动端底部fixed定位input输入框被软键盘遮挡解决办法，方法有三种，具体使用可以看应用后问题是否被解决。
解决IOS下唤起软键盘时fixed失效问题
快乐分享
07-03 4032
  刚入手vue就遇到以上问题,本来查了下网上说的很多解决方案,但是无奈没有一个试用于楼主需求的,自己解决吧~ 问题: fixed定位的div内输入框 focus 进入状态，则fixed定位的div被居中在屏幕可视区域 一、思路 IOS唤起软键盘(input框获取焦点),fixed定位相当于absolute,那就在获取焦点事件入手直接用absolute,当软键盘收起自动恢复fixed,所...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
uniapp position: fixed 偶尔失效/不起作用（不显示）（苹果手机position: fixed兼容性/失效）
qq_17627195的博客
09-11 5662
在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。我也是网上查找的原因，似乎知识IOS系统（苹果）手机的问题。的元素放在可以滚动（拥有滚动条）元素的外面，包括。，要确保当前元素的父元素都不能添加滚动样式。的时候，如果期望实现先对。浏览器窗口定位的兼容。
键盘遮挡问题
03-29
我自己又做了一遍 ，感觉还是自己动手能理解思路
fixed在ios失效解决方案
qq_42484025的博客
09-09 2594
position:fixed;在iOS系统上失效，自己在网上搜了一些解决办法，解决办法如下： 需要滑动的class为content .wanttoscroll{ position: fixed; top: 0; left: 0; bottom: 180px; /*距离底部的距离为底部盒子的高度，自己也可...
移动端 --- 解决ios上fixed失效的问题
小草莓的博客
03-19 2371
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 6281
position: fixed问题分析
ios苹果手机position：fixed的兼容性以及无法定位到全局的问题
weixin_53296753的博客
11-29 4321
首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。
微信小程序 苹果ios固定定位position:fixed失效bug
joe0235的博客
03-29 873
问题：底部固定栏设置 position: fixed; 挡住了下面的内容 设置了上面 view 的 margin-bottom ，微信开发工具中都正常，而且安卓真机下显示没问题，但是苹果真机却没启作用。 网上找了半天，发现除了给上面的 view 加 padding 和 margin 以外，还需要为page标签设置wxss样式： overflow-y: hidden; overflow-x: hidden; page{ height: 100%; overflow-y: hidden; over
ios下position:fixed失效的问题解决
王先帅的博客
04-23 8423
作者：旺仔如题的问题其实大家在开发过程中应该都有遇到过，网上搜的答案层出不穷，特别是用js解决的各路大神们，你用js解决你考虑过js的感受吗？这个耗能是用css3解决成千上万倍，好了话不多说，直接进入主题：如图，考虑到用户体验的问题，一般页面的下方提交按钮都会随着固定在页面上，方便用户点击，有些人肯定就说了，这还不简单，position：fixed；但是在ios这个坑货系统上这个position：...
fixed定位在ios手机上定位失效的原因
weixin_43448394的博客
04-12 2157
前几天遇到一个问题，我给两个元素加上了fixed定位，一个Z-index为500，一个z-index为509，如果不出意外应该是z-index值大的上面，但是实际发到ios手机上之后，非常奇怪
《H5 App开发》如何解决IOS 下固定定位fixed 失效问题？
qq_42660374的博客
03-07 1681
《H5 App开发》如何解决IOS 下固定定位fixed 失效问题？
ios 16.3 以上系统 position:fixed 不固定，怎么解决
06-02
在 iOS 16.3 以上的系统中，确实存在 `position: fixed` 不固定的问题。这是因为在这个版本中，苹果对于 `position: fixed` 的实现方式进行了更改，导致部分页面上的 fixed 元素无法固定在指定位置。 为了解决这个问题，可以尝试以下几种方法： 1. 使用 `-webkit-overflow-scrolling: touch` 属性来启用 iOS 上的滚动优化。这个属性会启用硬件加速和平滑滚动，可以提高页面滑动的性能。这个属性对于一些情况下的 fixed 元素可以起到固定的作用。 ```css .container { overflow: scroll; -webkit-overflow-scrolling: touch; } ``` 2. 将 `position: fixed` 改为 `position: sticky`。sticky 定位是一种新的定位方式，实现上与 fixed 定位类似，但是不会一直固定在页面上，而是在特定位置停止固定。需要注意的是，sticky 定位在一些旧的浏览器版本中可能不被支持。 ```css .fixed { position: sticky; top: 0; } ``` 3. 使用 JavaScript 来实现 fixed 元素的固定。可以通过监听 `scroll` 事件，然后动态改变 fixed 元素的位置来实现。 ```javascript var fixedEl = document.querySelector('.fixed'); window.addEventListener('scroll', function() { if (window.scrollY > 100) { fixedEl.style.position = 'fixed'; fixedEl.style.top = 0; } else { fixedEl.style.position = 'relative'; } }); ``` 希望以上方法能够帮助你解决 iOS 16.3 以上系统中 fixed 元素不固定的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值