网络移动固定布局解决方案

对于移动业务开发，在iOS下经常会出现固定元素和输入元素同时存在的情况。但是，当固定元素被软键盘唤起时，就会出现很多莫名其妙的问题。本文提供了一个简单的带输入框的固定布局方案。

iOS中的固定输入BUG现象。

先举个栗子，最直观的解释一下这个BUG现象。对于传统的固定布局，可以使用以下布局(以下仅为示意图代码)。

尸体！-固定定位表头-表头/表头！-可滚动区-主！-内容在这里.- /main！-固定定位的底部-页脚输入类型=' text '占位符=' footer . '/button submission/button/footer/body对应以下样式：那么看起来是这样的。拖动页面时，页眉和页脚已经定位在相应的位置，目测没问题。

但是问题来了！如果底部输入框的软键盘被调出，再次滑动页面，会看到下图：

我们可以看到固定元素已经随页面一起滚动了…固定属性无效！

这是为什么？简单说明一下：*软键盘被唤醒后，页面的固定元素会失效(即不能浮动，或者可以理解为变成绝对定位)，所以当页面超过一屏滚动时，失效的固定元素会跟随滚动* *。

这是iOS上固定元素和输入框的bug。不限于type=text的输入框，而是任意软键盘(如时间日期选择、选择选择等。)也会遇到同样的问题。

虽然isScroll.js可以很好地解决固定定位和滚动的问题，但是我们应该尽量不要依赖第三方库来简化实现。这里有个参考。

解决方案：

由于在iOS中调用软键盘后页面的固定元素会失效，导致随页面滚动，如果——页面不会滚动太久，即使固定元素失效，也无法随页面滚动，不会出现上述问题。

按照这种思路，如果固定元素的父元素不滚动，而是将主体的原始滚动区域移到main内部，而页眉和页脚的样式不变，那么代码如下：

尸体！-固定定位表头-表头/表头！-可滚动区-maindiv！-内容在这里.- /div /main！-固定定位的底部-页脚输入类型=' text '占位符=' footer . '/button submit/button/footer/body CSS :

页眉、页脚、主{ display:块；}标题{位置：固定；高度： 50px；left : 0；right : 0；top : 0；}页脚{位置：固定；height: 34pxleft : 0；right : 0；bottom : 0；}main {/* main绝对定位，内部滚动*/position:绝对；top: 50pxbottom: 34px/*使其可滚动*/overflow-y:滚动；}main。内容{ height: 2000px}

让我们再来看看这个：

在原始输入法下，固定元素可以定位在页面的正确位置。当页面滚动时，页脚不会跟随页面，因为主页面内的div是滚动的。

以上看似解决了问题，但如果在手机上实际测试，会发现主元素中的滚动非常不流畅。当滑动手指松开时，滚动会立即停止，原有的平滑滚动功能会丢失。看百度弹性滚动的问题，发现以下属性可以恢复webkit中的弹性滚动。

把这个属性加入主元素，丝滑的感觉又回来了！

此外，这里的页眉和页脚使用固定定位。如果考虑到旧的iOS系统不支持固定元素，完全可以用绝对替换固定。经过测试，结果是一样的。

此时，不依赖于第三方库的固定布局就完成了。

安卓下布局。

说到iOS，先简单说一下安卓下的布局。

在安卓2.3中，由于不支持溢出滚动，一些浏览器会出现滚动不流畅的情况。不过目前发现机身上的滚动还是很流畅的，用iOS中第一个有问题的固定定位布局就可以了。

如果需要考虑安卓2.3或更低版本的系统，因为不支持固定元素，还是需要考虑使用isScroll.js实现内部滚动。

其实在固定和输入框的问题上，基本思路是：因为软键盘被唤醒后固定会失效，当页面可以滚动时，会随着页面一起滚动。因此，如果页面无法滚动，即使固定元素失败，也不会滚动，也不会有bug。

所以可以考虑解决这方面的问题。

其他处理细节。

在细节方面，还是有很多需要注意的地方，那么就来说说我们实际遇到的一些大问题：

有时候，输入框被聚焦后，软键盘会挡住输入框。此时，您可以尝试输入元素的scrollIntoView来修复它。在iOS下使用第三方输入法时，输入法在唤起时往往会盖住输入框，输入一个字后才会出现输入框。目前不知道有没有什么好的方法可以让输入框在被唤起时正确显示。这暂时是iOS下的一个坑。在一些第三方浏览器中，底部的工具栏是浮动在页面上的，所以底部的固定定位会被工具栏挡住。解决方法相对简单粗暴。——适应不同的浏览器，调整固定元素与底部的距离。最好禁止页眉和页脚元素的touchmove事件，以防止滚动触发部分浏览器全屏模式切换，这将导致顶部地址栏和底部工具栏阻挡页眉和页脚元素。当页面滚动到上下边缘时，如果继续拖放，整个视图会被拖走，导致页面“见底”。

为了防止页面出现在底部，当页面被拖动到边缘时，可以通过判断拖动方向和是否是边缘来防止touchmove事件，并且可以防止页面被连续拖动。

以上面的内卷轴布局-卷轴-固定布局为例，给出一段代码作为参考：

防止内容区域滚动到底部后整页滚动。

var content=document . queryselector(' main ')；var startYcontent . addeventlistener(' touch start '，函数(e){ startY=e . touch[0]。clientY});内容。addeventlistener ('touch move '，函数(e){//高位表示向上滚动//低位表示向下滚动//1允许0禁止var状态=' 11 '；var ele=thisvar CurrentY=e . touch[0]。clientYIf (ele.scrollTop===0) {//如果内容小于容器，禁止同时上下滚动。状态=ele。偏右=元素。阴囊高度？'00' : '01';} else if (ele。scrolltopele。偏右=元素。scroll height){//已经滚到底，只能滚起来状态=' 10 '；} if(状态！='11') {//判断当前滚动方向var direction=current-starty0？'10' : '01';//操作方向和当前允许状态相加。如果操作结果为0，表示不允许向这个方向滚动，那么默认事件是禁止的，滚动if(！(parsent(状态，2)parsent(方向，2))){ stop event(e)；} }});