小技巧css解决移动端ios不兼容position:fixed属性,无需插件
来源:互联网 发布:淘宝秒杀要刷新吗 编辑:程序博客网 时间:2024/05/21 22:39
其次,position:absolute是没有问题的
最后,如果用到动画,用的是css的transform的话,input,select等编辑框不会移动,还是在原来的位置上。
如果需要固定(即fixed)某个东西,比如上、下导航条,可以用主窗口+浮动窗口的机制实现。
移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现。但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题。如图:
如何解决:
查阅资料之后想到一下几种解决方法
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,.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>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部,底部。顿时感觉开朗了
- 小技巧css解决移动端ios不兼容position:fixed属性,无需插件
- 小技巧css解决移动端ios不兼容position:fixed属性,无需插件
- 移动端android/ios低版本不兼容position:fixed属性
- 解决IE6不兼容position:fixed
- ios position:fixed 兼容
- 解决position: fixed;不兼容IE7的问题,由于IE6不支持些属性,可以不管
- 移动web开发中 ios不兼容fixed
- 关于移动端使用局部滚动解决ios不支持position:fixed后产生的问题
- 解决IE6不兼容fixed属性的方法
- ie6不兼容position:fixed的解决方法
- IE6不兼容position:fixed的解决方案
- 解决ios position:fixed无效
- ios对于fixed属性不兼容的解决方案
- ios对于fixed属性不兼容的解决方案
- 完美解决IE6不能兼容position:fixed
- 完美解决IE6不能兼容position:fixed
- 移动端 position fixed无效
- IE6不兼容position:fixed的解决办法(CSS里写js)
- 初识Linux(六)--javaJDK 、tomcat、mysql 的安装 和常见错误
- loadrunner:突破参数显示100条的限制
- linux db2 oracle
- 第十五周 oj平台 指针当形参
- 递归与非递归遍历文件目录
- 小技巧css解决移动端ios不兼容position:fixed属性,无需插件
- C#窗口间传递消息
- 闰年判断
- 设计模式-观察者模式
- 设计模式
- 安卓第三次实验:游戏倒计时实现
- asp 连接access数据库
- Serializable、Externalizable、Parcelable实现
- kde和gonme的区别