其实在 fixed 和输入框的问题上，根基思路就是： 由于 fixed 在软键盘唤起后会失效，导致在页面可以转动时，会跟从页面一起转动。因此假如页面无法转动，那么 fixed 元素纵然失效，也不会转动，也就不会呈现 bug 了。
所以可以在这个方面去思量办理问题。
其他的一些细节处理惩罚
在细节处理惩罚上，其实尚有许多要留意的，挑几个实境碰着较量大的问题来说一下：
有时候输入框 focus 今后，会呈现软键盘遮挡输入框的环境，这时候可以实验 input 元素的 scrollIntoView 举办修复。在 iOS 下利用第三方输入法时，输入法在唤起常常会挡住输入框，只有在输入了一条文字后，输入框才会浮出。今朝也不知道有什么好的步伐能让唤起输入框时正确显示。这临时算是 iOS 下的一个坑吧。有些第三方欣赏器底部的东西栏是浮在页面之上的，因此底部 fixed 定位会被东西栏遮挡。办理步伐也较量简朴粗暴——适配差异的欣赏器，调解 fixed 元素间隔底部的间隔。最好将 header 和 footer 元素的 touchmove 事件克制，以防备转动在上面触发了部门欣赏器全屏模式切换，而导致顶部地点栏和底部东西栏遮盖住 header 和 footer 元素。在页面转动到上下边沿的时候，假如继承拖拽会将整个 View 一起拖拽走，导致页面的“露底”。
为了防备页面露底，可以在页面拖拽到边沿的时候，通过判定拖拽偏向以及是否为边沿来阻止 touchmove 事件，防备页面继承拖拽。
以上面内转动 layout-scroll-fixed 机关为例，给出一段代码作为参考：
防备内容区域滚到底后引起页面整体的转动
var content = document.querySelector('main');var startY;content.addEventListener('touchstart', function (e) { startY = e.touches[0].clientY;});content.addEventListener('touchmove', function (e) { // 高位暗示向上转动 // 底位暗示向下转动 // 1容许 0克制 var status = '11'; var ele = this; var currentY = e.touches[0].clientY; if (ele.scrollTop === 0) { // 假如内容小于容器则同时克制上下转动 status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01'; } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) { // 已经滚到底部了只能向上转动 status = '10'; } if (status != '11') { // 判定当前的转动偏向 var direction = currentY - startY > 0 ? '10' : '01'; // 操纵偏向和当前答允状态求与运算，运算功效为0，就说明不答允该偏向转动，则克制默认事件，阻止转动 if (!(parseInt(status, 2) & parseInt(direction, 2))) { stopEvent(e); } }});
您大概感乐趣的文章: