溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

移動(dòng)端position:fixed小結(jié)

發(fā)布時(shí)間：2020-06-28 19:36:09 來(lái)源：網(wǎng)絡(luò) 閱讀：640 作者：qz357 欄目：開(kāi)發(fā)技術(shù)

fixed在移動(dòng)端是個(gè)坑，兼容性就是個(gè)極品。

ios的bug比較多，詳見(jiàn)https://github.com/maxzhang/maxzhang.github.com/issues/2

作者建議我們安卓還是使用fixed比較好，ios用iscroll來(lái)填坑比較好


關(guān)于fixed一些小細(xì)節(jié)還可以參考一下：

https://github.com/maxzhang/maxzhang.github.com/issues/11

里面提及到的例子：http://output.jsbin.com/omaCOSir/latest

布局的方法是：

<header class="relative">
    <div class="fixed">...</div>
</header>
<div class="main"></div>
<footer>
    <div class="fixed">...</div>
</footer>

有一點(diǎn)不明白的是為什么要用relative來(lái)表示header和footer，雖然真正起作用的是fixed。


如果fixed不支持，有一個(gè)我個(gè)人認(rèn)為很山寨的方法，就是用absolute，onscroll的時(shí)候計(jì)算$(window).scrollTop(),可是這個(gè)方法首先在展示的時(shí)候不完美，一點(diǎn)是有時(shí)候的計(jì)算是小數(shù)點(diǎn)，所以會(huì)空出1個(gè)px（當(dāng)然可以-1px來(lái)補(bǔ)），還有就是頻繁計(jì)算和重新渲染。


安卓4.4.2有些機(jī)子是可以支持的，有些的支持度不夠，渲染的時(shí)候不給力，但勉強(qiáng)可以渲染，開(kāi)啟硬件加速更佳


沒(méi)有比較好的辦法，不過(guò)有無(wú)敵方法：iScroll

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手