如何解决ios滑动 不支持position fixed
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何解决ios滑动 不支持position fixed相关的知识，希望对你有一定的参考价值。
如何解决：查阅资料之后想到一下几种解决方法
1，使用position：absolute模拟
<script type="text/javascript">
window.onscroll=function()
$(".fixed").css("top",$(window).scrollTop());
$(".foot").css("top",$(window).scrollTop()+$(window).height());
</script>
问题来了：滑动页面时头部底部div会有明显的抖动。
2，判断当前获得焦点元素是input则隐藏div改为position：absolute
<body onload=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,.footposition:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;
.headtop:0;
.footbottom:0;
.mainposition: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>
资料由：成都点点通软件开发公司提供！ 参考技术A 首先，现在的浏览器基本都支持position:fixed，不会不支持的，除非是ie6或之前的，你最好检查一下css是不是有其他问题，还有建议用iscroll，手机端开发非常有用本回答被提问者采纳
ios下position:fixed失效的问题解决
如图，考虑到用户体验的问题，一般页面的下方提交按钮都会随着固定在页面上，方便用户点击。
有些人肯定就说了，这还不简单，position：fixed；
但是在ios这个坑货系统上这个position：fixed这个css属性就会失效，你懂的，苹果就是搞特殊，下面我就用css来解决这个问题。
1.这个是要滑动的内容的css：
.page-content {
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
}
暂且我就将它的内容区域命名page-content，即html内容为
<div class="page-content">这个是可以滑动的内容区域</div>
2.这个是固定在页面上的区域：
<div class="scroll-page">这个是按钮</div>
.scroll-page{
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background: #f8105c;
color: white;
text-align: center;
line-height: 50px;
font-size: 18px;
z-index: 99;
}
这样的话可以完美解决这个fixed在ios上失效的问题。亲测有效！！！！！！网上搜的其它方法，大都有这样那样的问题
以上是关于如何解决ios滑动 不支持position fixed的主要内容，如果未能解决你的问题，请参考以下文章
解决ios微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能