前言

這個(gè)問(wèn)題其實(shí)是老問(wèn)題了，在沒(méi)有硬件加速的瀏覽器APP中都能見(jiàn)到這個(gè)問(wèn)題，比如安卓機(jī)自帶的瀏覽器等等，不過(guò)，所有機(jī)型的微信瀏覽器都沒(méi)有這個(gè)問(wèn)題。這個(gè)bug具體說(shuō)，就是fixed元素在最前端，并且overflow:hidden，當(dāng)滾動(dòng)這個(gè)元素的時(shí)候，我們期望的是它紋絲不動(dòng)，然而，這個(gè)元素會(huì)抖動(dòng)。

如果你希望能在任何移動(dòng)瀏覽器正常顯示，那么本文對(duì)你有用。

網(wǎng)上的解決辦法

搜索“fixed + 抖動(dòng)”會(huì)出現(xiàn)很多方案，我不在這列舉。然而，在我的手機(jī)上測(cè)試都無(wú)法正常修復(fù)bug，不過(guò)其中最接近的方案是，給元素綁定一個(gè)touchmove事件，然后阻止這個(gè)事件的默認(rèn)操作。雖然滿足了我的要求，但是，布局問(wèn)題讓js參與終究不是好辦法，通過(guò)摸索，我還是實(shí)驗(yàn)出了一個(gè)可行辦法。

修復(fù)方案

一、給body元素準(zhǔn)備一個(gè)類：

body.position-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

其實(shí)，不給body設(shè)類，而是給跟body元素同樣覆蓋面積的一個(gè)祖先元素設(shè)fixed，也可以實(shí)現(xiàn)同樣效果。如果這個(gè)祖先元素的文檔流位置并不是跟body重合，那就不行了。所以請(qǐng)找跟body元素位置重疊的祖先元素。

二、給元素也指定fixed類，具體就不寫(xiě)了，因?yàn)椴挥妙~外加任何代碼。這樣就行了。

這種方法的背后原理，我其實(shí)不太清楚，但問(wèn)題總算解決了。