摘要：討論背景眾所周知，元素在下的表現(xiàn)是糟糕的，元素在滾動(dòng)頁(yè)面中使用會(huì)出現(xiàn)各種奇怪的問(wèn)題，在微信瀏覽器中使用就更甚如頁(yè)面滾動(dòng)，元素與頁(yè)面相互分離頁(yè)面滾動(dòng)，元素消失等。說(shuō)明原生漸變顏色終止會(huì)覆蓋微信重設(shè)顏色的機(jī)制。

眾所周知，fixed元素在IOS下的表現(xiàn)是糟糕的，fixed元素在滾動(dòng)頁(yè)面中使用會(huì)出現(xiàn)各種奇怪的問(wèn)題，在微信瀏覽器中使用就更甚（如：頁(yè)面滾動(dòng)，fixed元素與頁(yè)面相互分離；頁(yè)面滾動(dòng)，fixed元素消失等）。這些表現(xiàn)過(guò)于離奇，顯得沒(méi)有邏輯，一時(shí)間很難找到對(duì)應(yīng)的解決方案。
所以筆者決定從一個(gè)簡(jiǎn)單列表頁(yè)出發(fā)，把遇到的各種奇怪問(wèn)題都羅列出來(lái)，并探究其出現(xiàn)的原因。以便在開(kāi)發(fā)中規(guī)避這些問(wèn)題。

假定我們的需求是做一個(gè)列表頁(yè)，列表頁(yè)的頂部放置一些「其他」信息，底部放置一個(gè)「創(chuàng)建」按鈕，中間顯示「項(xiàng)目」列表內(nèi)容。
設(shè)計(jì)稿大概是這樣。

根據(jù)需求，我們分別制作了三種解決方案。分別是

利用fixed定位，將「按鈕」放在滾動(dòng)區(qū)「項(xiàng)目列表」外面，解決方案示例1。

利用fixed定位，將「按鈕」放在滾動(dòng)區(qū)「項(xiàng)目列表」里面，解決方案示例2。

利用absolute定位，將「按鈕」放在滾動(dòng)區(qū)「項(xiàng)目列表」里面，并用「項(xiàng)目列表」去填充它所占的內(nèi)容，解決方案示例3。

分別在PC和IOS瀏覽器中運(yùn)行這幾個(gè)demo，我們發(fā)現(xiàn)，這些demo在PC中的表現(xiàn)都是符合設(shè)計(jì)需求的。但在IOS瀏覽器中運(yùn)行，就會(huì)各種出現(xiàn)各種的問(wèn)題，分別對(duì)應(yīng)這幾個(gè)現(xiàn)象。

解決方案示例1：從「其他」內(nèi)容區(qū)域開(kāi)始觸碰屏幕，進(jìn)行頁(yè)面滾動(dòng)，「按鈕」"脫離"頁(yè)面內(nèi)容區(qū)域。

解決方案示例2：從「其他」內(nèi)容區(qū)域開(kāi)始觸碰屏幕，進(jìn)行頁(yè)面滾動(dòng)，「按鈕」消失了。

解決方案示例3：「其他」區(qū)域直接消失不見(jiàn)了。

要解釋這幾個(gè)現(xiàn)象，我們需要從顏色填充說(shuō)起。

顏色填充示例1。

重點(diǎn)代碼：在這個(gè)示例里面，我們不對(duì)「項(xiàng)目列表」的高度進(jìn)行限制，直接讓內(nèi)容在body中進(jìn)行滾動(dòng)。然后將body的背景顏色設(shè)置為橘紅色。

操作：進(jìn)入頁(yè)面后直接向上拉動(dòng)頁(yè)面，拉動(dòng)到不可拖動(dòng)為止。

現(xiàn)象：我們發(fā)現(xiàn)「項(xiàng)目列表」的綠色區(qū)域下面，顯示了body的背景顏色橘紅色。

說(shuō)明：填充的顏色是可以定制的。

疑問(wèn)：這個(gè)顏色填充的區(qū)域會(huì)不會(huì)是body的延伸呢？

顏色填充示例2。

重點(diǎn)代碼：去除了Body的背景顏色，改成body的背景圖片并進(jìn)行平鋪。

操作：同上一個(gè)示例。

現(xiàn)象：我們發(fā)現(xiàn)「項(xiàng)目列表」的綠色區(qū)域下面，填充的依然body的背景顏色，而不是body的背景圖片。

說(shuō)明：填充的部分并不屬于Body標(biāo)簽本身。

疑問(wèn)：那如果我們將body的背景顏色去掉，而在html加上呢？

顏色填充示例3。

重點(diǎn)代碼：將body的背景顏色去掉。

操作：同上一個(gè)示例。

現(xiàn)象：這次填充的顏色是html的背景顏色。

說(shuō)明：這再次論證了填充的部分并不是固定某元素的內(nèi)容，不是某個(gè)元素的延伸。而且說(shuō)明系統(tǒng)找顏色是從滾動(dòng)區(qū)域逐級(jí)往上找的，直到找到為止。

疑問(wèn)：如果body和html的背景顏色都去掉，又會(huì)顯示什么顏色呢？

顏色填充示例4。

重點(diǎn)代碼：body和html的背景顏色去掉。

操作：同上一個(gè)示例。

現(xiàn)象：可以看到填充的是白色。

說(shuō)明：默認(rèn)的填充顏色是白色。

我們?cè)倩氐筋伾畛涫纠?。

重點(diǎn)代碼：與示例1相同

操作：這次我們?cè)谖⑿胖写蜷_(kāi)，并改變操作方式，先上拉顯示橘紅色填充內(nèi)容，再下拉顯示微信的黑邊(即顯示頂部"此頁(yè)面由XXX提供"文案)。再重新上拉，到不可拖動(dòng)為止。

現(xiàn)象：原本下拉填充的橘紅色變成了黑色。而且無(wú)論再怎么操作，都不會(huì)再重新顯示回橘紅色。

說(shuō)明：微信內(nèi)置瀏覽器修改了默認(rèn)的顏色填充。

小結(jié)

滾動(dòng)填充的顏色是可定制的。

滾動(dòng)填充的內(nèi)容并不是標(biāo)簽的延伸，只會(huì)填充純顏色。

滾動(dòng)填充的顏色是滾動(dòng)區(qū)域逐級(jí)往上找background-color確定的。

滾動(dòng)填充的顏色默認(rèn)值為白色。

微信會(huì)修改滾動(dòng)填充的顏色值。

我們知道IOS是有滾動(dòng)回彈機(jī)制的（即進(jìn)行滾動(dòng)時(shí)，滾動(dòng)到最頂部或者最底部顯示的一個(gè)回彈動(dòng)畫(huà)。我們上面講的滾動(dòng)顏色填充就是這個(gè)機(jī)制的具體實(shí)現(xiàn)）前面解決方案示例1中遇到的問(wèn)題（「按鈕」"脫離"頁(yè)面內(nèi)容區(qū)域），就是由于這個(gè)機(jī)制引起的。
現(xiàn)在我們先來(lái)探究一下，這個(gè)滾動(dòng)回彈機(jī)制具體的運(yùn)行過(guò)程是怎么樣的。以下操作均在解決方案示例1下進(jìn)行。

重點(diǎn)操作如下過(guò)程：

先將示例代碼在IOS內(nèi)置瀏覽器safari中打開(kāi)。

用雙指捏起整個(gè)頁(yè)面（即類(lèi)似于圖片的縮小操作）。

現(xiàn)象：我們發(fā)現(xiàn)，在頁(yè)面是可以被縮小的。頁(yè)面外部部分是純顏色。

說(shuō)明：有一個(gè)容器包裹著我們的頁(yè)面。這個(gè)容器通常用于窗口縮放的時(shí)候，填充顏色。

雙指重復(fù)緩慢地捏起，放松整個(gè)頁(yè)面。觀察頁(yè)面變化。

現(xiàn)象：當(dāng)剛開(kāi)始縮小頁(yè)面時(shí)，外部容器的顏色與滾動(dòng)填充索引到的顏色（粉紅色）相同。

現(xiàn)象：當(dāng)逐漸縮小頁(yè)面時(shí)，外部容器的顏色將從索引到的顏色漸變到白色(這個(gè)顏色和我們上面探討到的默認(rèn)填充顏色相同)。

先將示例代碼在微信內(nèi)置瀏覽器中打開(kāi)，重復(fù)上面操作。

用雙指捏起整個(gè)頁(yè)面（即類(lèi)似于圖片的縮小操作）。

現(xiàn)象：外部容器的顏色變成了黑色，而且容器頂部出現(xiàn)了「此頁(yè)面由 XXX 提供」文案。

說(shuō)明：在微信下，為了顯示「此頁(yè)面由 XXX 提供」的提示語(yǔ)，微信自己重寫(xiě)了這個(gè)機(jī)制中的顏色，設(shè)置為黑色。

雙指重復(fù)緩慢地捏起，放松整個(gè)頁(yè)面。觀察頁(yè)面變化。

現(xiàn)象：外部容器的顏色在黑色和粉紅色之間閃動(dòng)。

現(xiàn)象：越是放松頁(yè)面，閃動(dòng)越頻繁。

說(shuō)明：微信重設(shè)顏色的機(jī)制和原生滾動(dòng)回彈中縮小頁(yè)面漸變顏色的機(jī)制相沖突。

說(shuō)明：無(wú)論是縮小頁(yè)面還是恢復(fù)頁(yè)面大小，微信都嘗試將容器背景顏色設(shè)置為黑色。

打開(kāi)頁(yè)面，先滾動(dòng)到底部，顯示了粉紅色，再滾動(dòng)到頂部微信提示文案并顯示黑色，再滾動(dòng)到底部顯示微信修改后的黑色，再縮小頁(yè)面，在滾動(dòng)到底部。

現(xiàn)象：底部顯示顏色的是粉紅色。

說(shuō)明：原生漸變顏色終止會(huì)覆蓋微信重設(shè)顏色的機(jī)制。

在上一個(gè)操作的前提下，重新滾動(dòng)到頂部，顯示微信的提示文案，在滾動(dòng)回底部。（整個(gè)過(guò)程不進(jìn)行縮放）

現(xiàn)象：底部顯示的顏色重新被設(shè)置回黑色。

說(shuō)明：只要滾動(dòng)到頂部，為了顯示微信頂部的提示文案部分，都會(huì)觸發(fā)微信的顏色修改機(jī)制。

說(shuō)明：由于不進(jìn)行頁(yè)面縮放，原生的漸變機(jī)制不會(huì)被觸發(fā)，原生部分不會(huì)進(jìn)行顏色重置。

這一系列的操作解釋了這幾個(gè)問(wèn)題：

為什么在微信中，先往上滾再往下滾動(dòng)頁(yè)面，顏色的填充會(huì)變成了黑色，而不是body的背景色。因?yàn)槲⑿艑?duì)外部容器的背景色進(jìn)行了重載。

為什么解決方案示例1中,「按鈕」看起來(lái)"脫離"了頁(yè)面。

因?yàn)槲⑿艑?duì)外部容器的背景色設(shè)置成了黑色，所以滾動(dòng)到底部進(jìn)行回彈的時(shí)候，頁(yè)面內(nèi)容和按鈕之間的區(qū)域（即顏色填充區(qū)域）變成了黑色。而黑色給讓一種"空"的感覺(jué)，所以感覺(jué)到「按鈕」脫離的頁(yè)面內(nèi)容的錯(cuò)覺(jué)。

在safari中并不會(huì)改成黑色，即填充的顏色和Body的背景顏色一致。所以不會(huì)有黑色，不會(huì)產(chǎn)生微信上?！赴粹o」脫離的頁(yè)面內(nèi)容的錯(cuò)覺(jué)。

在剛才的示例操作中，不知道大家有沒(méi)有發(fā)現(xiàn)一個(gè)奇怪的問(wèn)題。
在頁(yè)面縮放過(guò)程中，fixed元素與其他元素是在不同的顯示層進(jìn)行渲染了？

重新執(zhí)行前面的操作過(guò)程。我們發(fā)現(xiàn)：

fixed元素的定位并不是基于手機(jī)屏幕，因?yàn)榭s放的過(guò)程中，「按鈕」隨著縮放進(jìn)行了上移。

fixed元素的定位也不是基于body元素的，因?yàn)閺幕貜棛C(jī)制來(lái)說(shuō)，「按鈕」早已經(jīng)脫離了body區(qū)域(紅色框標(biāo)記的顏色深粉紅色塊就是body的背景色)。

fixed元素的基準(zhǔn)值，其實(shí)是介于二者之間的一個(gè)顯示窗口（類(lèi)似于viewPort）。
這個(gè)顯示窗口在不縮放的情況下，等于瀏覽器的窗口大小。
在縮放的情況下，顯示窗口大概是這樣子。

body內(nèi)容超出了顯示窗口就形成了回彈部分。
所以其實(shí)如果我們往頁(yè)面的左右部分滑動(dòng)，也是有回彈效果存在的。只是這個(gè)手勢(shì)操作被IOS寫(xiě)為頁(yè)面「前進(jìn)」，「后退」這兩個(gè)功能罷了。
如果我們將html的width設(shè)置為110%，小心滑動(dòng)，就能重現(xiàn)左右的回彈效果。左右回彈示例

所以在頁(yè)面縮放過(guò)程中，「fixed元素與其他元素是在不同的顯示層進(jìn)行渲染」的假像，
只是由于body相對(duì)于顯示窗口同時(shí)在橫坐標(biāo)方向和縱坐標(biāo)方向發(fā)現(xiàn)了位移，
形成了左右兩部分的回彈顏色填充。
而fixed元素基于顯示窗口固定，沒(méi)有發(fā)生位移。而形成的分層的假想。
這解釋了為什么fixed元素為什么一直在底部，而不是隨著body在回彈機(jī)制下滾動(dòng)。

最后這個(gè)問(wèn)題最簡(jiǎn)單，也最離奇，在IOS中，除了設(shè)置z-index外，元素只根據(jù)元素在代碼中出現(xiàn)的順序決定其顯示的深度。布局格式并不能改變?cè)氐娘@示深度。
分別在PC端和IOS端運(yùn)行布局示例。

在PC中，由于「按鈕」fixed定位和「其他」absolute定位脫離文檔流。所以其顯示層級(jí)比「項(xiàng)目列表」高，所以覆蓋在「項(xiàng)目列表」外面。

在IOS中，元素只根據(jù)元素在代碼中出現(xiàn)的順序決定其顯示的深度。即：布局格式并不能改變?cè)氐娘@示深度。
所以「項(xiàng)目列表」覆蓋了「其他」和「按鈕」。

這解釋了最后一個(gè)問(wèn)題（「其他」區(qū)域消失不見(jiàn)）。這是由于「項(xiàng)目列表」的padding-top將「其他」區(qū)域遮蓋住了。至于為什么要這么設(shè)計(jì)，后面會(huì)講到。

也解釋了第二個(gè)問(wèn)題（頁(yè)面滾動(dòng)，「按鈕」消失了）。

第二個(gè)問(wèn)題是由于不改變顯示深度，所以「按鈕」仍處于「項(xiàng)目列表」容器內(nèi)。

而「按鈕」的定位是根據(jù)顯示容器，而不是body，所以滾動(dòng)過(guò)程中不會(huì)跟著body移動(dòng)，一定停留在底部。

在滾動(dòng)時(shí)，「按鈕」超出了「項(xiàng)目列表」的顯示區(qū)域，「項(xiàng)目列表」設(shè)置了overflow，不在其顯示區(qū)域的都不會(huì)被顯示。所以滾動(dòng)過(guò)程中，「按鈕」逐漸消失。

而多出來(lái)的部分是回彈機(jī)制填充的內(nèi)容。所以產(chǎn)生了顏色遮蓋了「按鈕」的錯(cuò)覺(jué)。

講了這么多，那到底有什么方法可以規(guī)避上面的問(wèn)題呢？

既然fixed布局這么多問(wèn)題，我們改用absolute布局吧。我們改成absolute示例1。但多次滾動(dòng)后，我們發(fā)現(xiàn)了另一個(gè)問(wèn)題，滾動(dòng)時(shí)，「項(xiàng)目列表」的滾動(dòng)會(huì)很容易與外部body下的滾動(dòng)沖突。特別是當(dāng)觸碰到非「項(xiàng)目列表」區(qū)域的其他內(nèi)容時(shí)（如「其他」或「按鈕」），將觸發(fā)的是body的滾動(dòng)，無(wú)法滾動(dòng)「項(xiàng)目列表」，違背操作意愿。

為了減少body滾動(dòng)的觸發(fā)幾率，可以用「項(xiàng)目列表」的padding值對(duì)「其他」和「按鈕」區(qū)域進(jìn)行占位。得到absolute示例2。這時(shí)，即使從「其他」區(qū)域或「按鈕」區(qū)域進(jìn)行觸摸滾動(dòng)，滾動(dòng)的依然是「項(xiàng)目列表」中的內(nèi)容。不會(huì)觸發(fā)body的滾動(dòng)回彈。這即是一個(gè)好事，也是一個(gè)錯(cuò)誤現(xiàn)象。因?yàn)樵谶@個(gè)時(shí)候，移動(dòng)「按鈕」和「其他」區(qū)域。也會(huì)滾動(dòng)「項(xiàng)目列表」。這和我們的設(shè)計(jì)是不符的。

而且以上兩個(gè)解決方案都還有另一個(gè)操作的問(wèn)題，如果當(dāng)「項(xiàng)目列表」?jié)L動(dòng)到最頂部，或者對(duì)底部。停止1秒左右（即等待滾動(dòng)趨勢(shì)結(jié)束），
再往相同方向強(qiáng)制滾動(dòng)（例如，往下滾到最低，靜置1s，再往下滾）。這時(shí)，滾動(dòng)回彈就不會(huì)在「項(xiàng)目列表」中進(jìn)行，而是被放到了body區(qū)域上進(jìn)行。這時(shí)在body的滾動(dòng)趨勢(shì)還沒(méi)有結(jié)束前，無(wú)論怎么進(jìn)行滾動(dòng)。都會(huì)在body中觸發(fā)。
與用戶期待的滾動(dòng)不符。

上面的一切都是由于頁(yè)面最外層的滾動(dòng)回彈引起的。有沒(méi)有方案禁止頁(yè)面最外層的滾動(dòng)回彈呢？很抱歉，筆者沒(méi)有找到。
但是！筆者找到了不顯示滾動(dòng)回彈顏色填充內(nèi)容的方法。

那就是fixed大法。直接將整個(gè)body設(shè)置成position:fixed。這時(shí)整個(gè)body都基于顯示窗口定位。不會(huì)再顯示滾動(dòng)回彈內(nèi)容。fixed示例1。然而這僅僅是不顯示顏色填充的內(nèi)容。滾動(dòng)回彈其實(shí)還是存在的，只是被body擋住了顯示不出來(lái)。頁(yè)面依然會(huì)存在上面的兩個(gè)問(wèn)題。最外部的滾動(dòng)回彈還是會(huì)與「項(xiàng)目列表」區(qū)相沖突。

怎么解決沖突？去掉「項(xiàng)目列表」的-webkit-overflow-scrolling: touch;樣式，運(yùn)行代碼。fixed示例2。

沖突解決。不過(guò)滾動(dòng)變卡頓了。怎么辦？換個(gè)順滑滾動(dòng)的實(shí)現(xiàn)方案唄，例如用IScroll。fixed示例3