在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

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

</div>

如上代碼，box為固定高度，內(nèi)容超過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;屬性后頁面滑動(dòng)流暢了，但是header元素滾動(dòng)時(shí)出現(xiàn)異常，header跟隨內(nèi)容一起滾動(dòng)了，只有當(dāng)頁面停止?jié)L動(dòng)時(shí)，header才會(huì)固定住。

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

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

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

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

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

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

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

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

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

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

2018年3月26日 09:41