小技巧css解决移动端ios不兼容position:fixed属性，无需插件

最新推荐文章于 2022-11-29 16:57:33 发布
最新推荐文章于 2022-11-29 16:57:33 发布
阅读量10w+ 收藏 26
点赞数 12
分类专栏： 小效果 文章标签： ios 定位 fixed 不兼容 css解决
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu__hua/article/details/40106595
版权

移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：



如何解决：

查阅资料之后想到一下几种解决方法

1，使用position：absolute模拟

<script type="text/javascript">
    window.οnscrοll=function(){
    $(".fixed").css("top",$(window).scrollTop());
   $(".foot").css("top",$(window).scrollTop()+$(window).height());
}
</script>

问题来了：滑动页面时头部底部div会有明显的抖动。

2，判断当前获得焦点元素是input则隐藏div改为position：absolute

<body οnlοad=setInterval("a()",500)>

<script type="text/javascript">
  function a(){
    if(document.activeElement.tagName == 'INPUT'){    
      $(".fixed").css({'position': 'absolute','top':'0'}); 
       } else {  
         $(".fixed").css('position', 'fixed');  
        }
      }
  </script>

问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。

3，插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery Mobile  没尝试，感觉会增负担。

4，重点来了：

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。

<!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>

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


啦啦噜啦啦
关注
  • 12
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 26
    评论
专栏目录
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IE6不兼容position:fixed属性的解决办法分享
01-21
position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案，欢迎来喷我。 下面是代码 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>position: fix
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
hello world.
03-11 4万+
1.-webkit-overflow-scroll:touch; 2.使用其他布局方式
解决CSS position:fixed 抖动问题
07-11 629
将id为head的div固定在最顶部，所设置的CSS属性如下： #head { overflow:hidden; *zoom:1; height:44px; background-image:url(../Img/bg.png); position:fixed; z-index:500; width:100%; ...
移动端web页面input+fixed布局bug总结
热门推荐
ly2983068126的博客
10-21 4万+
最近在做移动端，又涉及到了 fixed（固定位置定位）的问题，在使用fixed的过程中，遇到了一些的问题，并且部分问题无法找到较好的解决方案。下面 是我在网上找到的一些解决方法，仅供参考： 正常界面 图中被红色选中区域为 position:fixed 元素 问题1：footer输入框 focus 状态，footer 被居中，而不是吸附在软键盘上部。
IOS系统不兼容position: fixed；属性的解决方案
weixin_46246967的博客
05-02 484
IOS系统不兼容position: fixed;属性的解决方案
如何解决IOS系统下fixed定位布局失败的兼容问题
小杨吔包的博客
04-16 2176
    在开发移动端页面特别是各种程序封装的h5APP中，我们常常会需要加上下导航栏的功能，在移动端和PC端用position:fixed就能解决，但是实际过程中在IOS端常常会遇到不兼容的问题，比如页面滑到一半置顶就消失，在网络上找了很多方法，都不是很实用，于是在研究了一下。   简单来说,就是用absolute定位来代替fixed定位...
ios苹果手机position：fixed的兼容性以及无法定位到全局的问题
weixin_53296753的博客
11-29 3840
首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。
跨浏览器的实践:position:fixed 层的固定定位
10-30
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
css中position:fixed实现div在窗口上下左右居中
01-21
复制代码代码如下: div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中，那么把...
iphone页面怎么实现固定工具栏 html css js,固定工具栏 data-position=fixed
weixin_29732787的博客
06-03 616
在浏览器支持的 CSS position: fixed (大多数的桌面浏览器, iOS5+, Android 2.2+, BlackBerry 6, 和其他)。工具栏使用“固定工具栏”插件将被固定在视图的顶部或底部，当页面自由滚动，固定栏始终浮动在屏幕的顶部或者底部。在浏览器不支持固定定位，工具栏将留在那固定的位置(页面的顶部或底部)。给头部栏或底部栏设置这样的行为，需要给工具栏的容器增加 dat...
HTML5 CSS3做的一个静态的苹果官网首页
weixin_44691513的博客
06-21 8736
HTML5 CSS3做的一个静态的苹果官网首页 简介以及使用的工具 **介绍：**这次的一个项目是我年后学习HTML和CSS一个月后做的一个阶段性的项目，花了一整天，这里只讲解写代码时候的具体思维，分析布局的。具体的代码我已经上传到我的资源中。需要的可以去下载，或者加下作者的qq：1349869599，可以私发给你，不收取米，纯属相互交流，共同学习前端。交个朋友。 使用的工具 使用的具体工具是vscode浏览器用的是谷歌浏览器。大家也可以使用自己喜欢的软件，反正能运行就行。 头部导航栏讲解 PC端（电脑）：
【移动端适配二】H5移动端适配屏幕安全区（ios和android）
hzxOnlineOk的博客
11-29 4403
全面屏手机把整个webview（包括状态栏）给H5的话，不对状态栏进行控制往往会有以下如图问题出现，这样头部的返回按钮置于页面的安全区外，无法进行操作。
使用fixed的时候，在手机上看是否会有问题，怎么解决？
IT修真院：初学者转行到互联网的聚集地
05-14 447
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能，本篇分享的是： 【 使用fixed的时候，在手机上看是否会有问题，怎么解决？】 大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。 今天给大家分享一下，修真院官网css任务4，深度思考中的...
ios position: fixed 问题
Kayson13的博客
08-04 1870
为了解决卡顿的问题， 添加了如下代码 -webkit-overflow-scrolling: touch; 但是在ios上发现，利用fixed进行底部固定，出现bug 具体现象是： 在我滚动的时候，原本应该固定在底部的按钮，跟着滚动来回跳动，知道滚动结束。 原因 查找资料发现： position:fixed在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。 解决方法： 在fixed所在标签添加如下样式
vue项目移动端position: fixed；不生效原因及解决方案
weixin_42280496的博客
07-22 4761
1.问题描述： 我用vue做的是一个官网，现在要适配移动端。就如大部分的移动端页面那样，顶部有个固定定位的导航栏。我们这个官网在pc状态时也是有的，但是固定定位(position: fixed;)在pc时是没问题的，切换成移动端后，css里写了position: fixed但并没有生效，div还是会跟着滚动轴的滑动而被卷起来。 2.解决问题： ①百度后发现大多的解决方式就是在父或上级或上级上级 … 找有没有设置transfrom这个css属性，如果有的话 把它的值改为none或者直接去掉。【我的项目里没有
解决CSS position:fixed 兼容问题
最新发布
05-30
在不同浏览器中，`position: fixed` 的表现可能会有所不同，这可能会导致兼容性问题。以下是一些常见的解决方法： 1. 使用`position: absolute`替代`position: fixed`，并将父元素的`position`属性设置为`relative`。这个方法在某些情况下可以解决兼容性问题，但是可能会导致布局方面的问题。 2. 使用 JavaScript 来模拟 `position: fixed`。这种方法可以确保在所有浏览器中表现一致，但是可能会增加页面的加载时间，并且需要编写更多的代码。 3. 使用 CSS Hack。这种方法不是最优的选择，但是在某些情况下可能是必要的。例如，您可以使用以下 CSS 代码来针对不同的浏览器： ``` /* Firefox */ @-moz-document url-prefix() { .fixed-element { position: absolute; position: fixed; } } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { .fixed-element { position: absolute; position: fixed; } } /* Internet Explorer */ @media \0screen { .fixed-element { position: absolute; position: fixed; } } ``` 总之，为了获得最佳的兼容性，最好避免使用 `position: fixed`，或者使用 JavaScript 来模拟它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值