移动端网页滑动卡顿问题？

Question

示例代码：

<div class="box">

   <div class="header"></div>

   <div></div>

   <div></div>

   <div></div>

   ...

</div>

如上代码，box为固定高度，内容超过box高度时自动滚动（overflow-y: auto;）；

当box内容滚动一定高度时header固定住（position: 'fixed';）

此效果在iOS手机上滑动时非常卡顿，设置-webkit-overflow-scrolling: touch;属性后页面滑动流畅了，但是header元素滚动时出现异常，header跟随内容一起滚动了，只有当页面停止滚动时，header才会固定住。

请教各位大侠有遇到过类似问题的，还望指教！感恩！

Answer 1

fixed&nbsp;元素放到滚动容器外部

Answer 2

加入overflow-y: auto;后，会使ios的页面造成卡顿，滑到哪是哪，但是js的响应不会延迟。加入-webkit-overflow-scrolling: touch;后，ios页面滑动有惯性，松开手指会继续滑，但是js从手指松开到滚动停止是不会响应的，知道停止后响应。