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

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

阅读量：6364 次

发布时间：2019-06-23

本文共 4448 字，大约阅读时间需要 14 分钟。

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

如何解决：

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

1，使用position：absolute模拟

window.οnscrοll=function(){

$(".fixed").css("top",$(window).scrollTop());

$(".foot").css("top",$(window).scrollTop()+$(window).height());

}

</script>

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

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

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>

<head>

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

<div>

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

content <br>

</div>

</article>

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

</body>

</html>

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

转载于:https://www.cnblogs.com/hellman/p/4186248.html

你可能感兴趣的文章

关于VMware Workstation主机列表问题求教

查看>>

配置管理小报101021:给ubuntu加监控

查看>>

qml文字滚动效果的封装，实现方式运用的qml中提供的动画效果，另一种实现方式也可以使用定时器修改控件的坐标来实现...

debug_backtrace() 函数生成一个 backtrace（追踪）

jersey + spring + mybatis + redis项目搭建

查看>>

PAT 1006 部分正确_另一种解法

查看>>

在Keil环境下使用JLink实现printf输出重定向至debug窗口

查看>>

JFreeChart生成3D饼图

查看>>