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

最新推荐文章于 2020-10-09 10:13:05 发布

weixin_34306593

最新推荐文章于 2020-10-09 10:13:05 发布

阅读量1.7k

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/benchan2015/p/5013773.html

版权

转载自：http://www.ithao123.cn/content-649841.html

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

如何解决：

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

1，使用position：absolute模拟

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

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

问题来了:不停监控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>

转载于:https://www.cnblogs.com/benchan2015/p/5013773.html

weixin_34306593

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小技巧css解决移动端ios不兼容position:fixed属性，无需插件

转载自：http://www.ithao123.cn/content-649841.html移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：如何解决：查阅资料之后想到一下几种解决方法1，使用position：abs...
复制链接

扫一扫