移动端阻止ios弹性滑动_解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）...

一些细节处理

在细节处理上，其实还有不少要注意的，挑几个实际遇到比较大的问题来讲一下：android

有时候输入框 focus 之后，会出现软键盘遮挡输入框的状况，这时候能够尝试 input 元素的 scrollIntoView 进行修复。

在 iOS 下使用第三方输入法时，输入法在唤起常常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。

有些第三方浏览器底部的工具栏是浮在页面之上的，所以底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不一样的浏览器，调整 fixed 元素距离底部的距离。

最好将 header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而致使顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。

在页面滚动到上下边缘的时候，若是继续拖拽会将整个 View 一块儿拖拽走，致使页面的“露底”。ios

fixed定位web

为了防止页面露底，能够在页面拖拽到边缘的时候，经过判断拖拽方向以及是否为边缘来阻止 touchmove 事件，防止页面继续拖拽。浏览器

以上面内滚动 layout-scroll-fixed 布局为例，给出一段代码做为参考：工具

01

// 防止内容区域滚到底后引发页面总体的滚动

02

var content = document.querySelector('main');