我们在开发移动端页面时，经常会存在这种需求，在页面顶部或底部有一个输入框，一直浮动在顶部或底部位置，中间部分的内容是可以滚动的。比如底部输入框的搜索功能，或底部输入框的写评论功能。
这种问题，我们一般会使用的方法是一个position:fixed;的div，在里面放一个input，浮动在顶部或底部，其他的内容可以滚动。
这种方法在安卓设备中肯定是没问题的。但是在ios设备中就会有问题了。
问题1：滚动页面内容部分时，浮动部分可能会消失，滚动结束后才展示出来
问题2：点击输入框进行输入时，呼出键盘后，输入框位置漂移了。
如视频效果：
这两个问题，之前在网上确实找过很多方法，也试过，但是都不太理想。
之前因为时间问题，所以就只使用了这种方法：
输入框获取焦点时，得到页面的滚动高度，将输入框div使用absolute绝对定位到当前滚动高度处，并禁止滚动。失去焦点后，将输入框div变回fixed，回到原来样子。
但此方法并不是很理想。只能勉强解决顶部浮动输入框的输入问题，但是页面滚动时，浮动区域消失和底部输入框问题无法得到解决。所以此方法就不适应了。
我们来看看新的方法。（此方法的原理是不适应fixed，全内容的高度就是body的整体高度，这样滚动起来就可以处理这些问题了，关键就是用到了有滚动条的div）
首先我们结构还是一样。页面3个外层div，有顶部input与底部input，中间的可滚动内容通过js计算出来。（这里注意，要关联计算当前页面的所有高度，让内容正好充满一屏）
<div class="fixedTop" alt="顶部不动的div">
<input type="text" name="" value="输入框1">
</div>
<div class="centerContent">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div class="fixedBottom" alt="底部不动的div">
<input type="text" name="" value="输入框2">
</div>
css
*{
margin:0;
padding: 0;
}
.fixedTop{
height: 30px;
width:100%;
background-color: red;
}
.fixedBottom{
height: 30px;
width:100%;
background-color: red;
}
.centerContent{
overflow: auto;/*让div存在滚动条*/
/*解决ios中滚动div的卡顿问题*/
-webkit-overflow-scroll:touch;
-webkit-overflow-scrolling: touch;
}
.fixedTop input,.fixedBottom input{
width: 100%;
height:30px;
}
.centerContent的高度通过页面整体高度-顶部div高度-底部div高度获得
js操作：
var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滚动区域高度
$(".centerContent").css({"height":centerContentH});
//底部输入框操作 输入框获取焦点时，将页面滚到最底部去
$(".fixedBottom input").focus(function(){
setTimeout(function(){
$(window).scrollTop(window.innerHeight);
},500);
});
用这种方法，我们来看下效果：
看，是不是就实现了
我们来看看全部代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>解决</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.fixedTop{
height: 30px;
width:100%;
background-color: red;
}
.fixedBottom{
height: 30px;
width:100%;
background-color: red;
}
.centerContent{
overflow: auto;/*让div存在滚动条*/
/*解决ios中滚动div的卡顿问题*/
-webkit-overflow-scroll:touch;
-webkit-overflow-scrolling: touch;
}
.fixedTop input,.fixedBottom input{
width: 100%;
height:30px;
}
</style>
</head>
<body>
<div class="fixedTop" alt="顶部不动的div">
<input type="text" name="" value="输入框1">
</div>
<div class="centerContent">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div class="fixedBottom" alt="底部不动的div">
<input type="text" name="" value="输入框2">
</div>
<script type="text/javascript">
var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滚动区域高度
$(".centerContent").css({"height":centerContentH});
//底部输入框操作 输入框获取焦点时，将页面滚到最底部去
$(".fixedBottom input").focus(function(){
setTimeout(function(){
$(window).scrollTop(window.innerHeight);
},500);
});
</script>
</body>
</html>
整体代码
原文地址：https://www.cnblogs.com/wuhairui/p/ios-fixed.html
时间： 2024-10-16 19:58:13