移动端 页面滑动与 fixed 定位不生效

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

所以我们一般会在需要滚动的元素上面加：-webkit-overflow-scrolling: touch; 这个 css 属性。

但是有当子元素有 fixed 定位时，fixed 定位会失效。

原因在于：-webkit-overflow-scrolling 属性被设置 "touch"的元素 会创建一个层叠上下文，这时fixed 定位元素会由视口改为该祖先元素。所以会看到定位元素随着页面滚动而飞掉。

解决办法：将定位元素改为 sticky 定位。

----------更新

sticky 安卓不支持 o(╥﹏╥)o

仍使用 fixed 布局，但是让 fixed 的元素位于滚动内容外面。

---

方案：将页面进行拆分: 页面（main） = 内容（sectionA） + 输入框（sectionB）+ 其他（sectionOther）

• 原理 ： main.height = window.screen.height ;

sectionA 绝对定位，进行内部滚动 overflow-y：scroll ;
sectionB 可保证在页面最底部。
.main { position: relative; height: 100%; }
.sectionA { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch //为了使滚动流畅，sectionA 添加属性 }
.sectionB { position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; }

推荐：

1. 深入研究-webkit-overflow-scrolling:touch及ios滚动
2. 不受控制的 position:fixed
3. 移动端input“输入框”常见问题及解决方法