鍍金池/ 問(wèn)答/HTML/ 移動(dòng)端網(wǎng)頁(yè)滑動(dòng)卡頓問(wèn)題？

移動(dòng)端網(wǎng)頁(yè)滑動(dòng)卡頓問(wèn)題？

示例代碼：
<div class="box">

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

</div>

如上代碼，box為固定高度，內(nèi)容超過(guò)box高度時(shí)自動(dòng)滾動(dòng)（overflow-y: auto;）；
當(dāng)box內(nèi)容滾動(dòng)一定高度時(shí)header固定?。╬osition: 'fixed';）

此效果在iOS手機(jī)上滑動(dòng)時(shí)非?？D，設(shè)置-webkit-overflow-scrolling: touch;屬性后頁(yè)面滑動(dòng)流暢了，但是header元素滾動(dòng)時(shí)出現(xiàn)異常，header跟隨內(nèi)容一起滾動(dòng)了，只有當(dāng)頁(yè)面停止?jié)L動(dòng)時(shí)，header才會(huì)固定住。

請(qǐng)教各位大俠有遇到過(guò)類似問(wèn)題的，還望指教！感恩！

回答
編輯回答
離夢(mèng)

fixed 元素放到滾動(dòng)容器外部

2018年9月17日 15:55
編輯回答
疚幼

加入overflow-y: auto;后，會(huì)使ios的頁(yè)面造成卡頓，滑到哪是哪，但是js的響應(yīng)不會(huì)延遲。
加入-webkit-overflow-scrolling: touch;后，ios頁(yè)面滑動(dòng)有慣性，松開(kāi)手指會(huì)繼續(xù)滑，但是js從手指松開(kāi)到滾動(dòng)停止是不會(huì)響應(yīng)的，知道停止后響應(yīng)。

2017年11月18日 04:31
編輯回答
若相惜

這里的關(guān)鍵是header在box達(dá)到一定高度后會(huì)置頂（top:0）的效果吧。
我使用JS來(lái)控制header的狀態(tài)變更：
1.監(jiān)聽(tīng)body.scroll
2.獲取header距離頁(yè)面頂部的距離offsetTop
3.判定當(dāng)scroll滾動(dòng)高度大于offsetTop時(shí)，給header添加fixtop樣式（position: fixed;top:0;）

2017年5月14日 20:32
編輯回答
別傷我

問(wèn)題基本解決，示例代碼結(jié)構(gòu)不變。該頁(yè)面高度設(shè)為手機(jī)屏幕高度，去掉overflow-y: auto;和-webkit-overflow-scrolling: touch;的設(shè)置。監(jiān)聽(tīng)window的滾動(dòng)事件來(lái)判斷滑動(dòng)和設(shè)置header元素懸停。

不過(guò)還有點(diǎn)小問(wèn)題，在iOS手機(jī)QQ里面打開(kāi)網(wǎng)頁(yè)，header元素還是跟隨網(wǎng)頁(yè)整體滾動(dòng)。在微信和safari中打開(kāi)網(wǎng)頁(yè)，頁(yè)面效果正常。

2018年3月26日 09:41