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

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

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

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

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

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

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

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

解決方案示例1：從「其他」內容區(qū)域開始觸碰屏幕，進行頁面滾動，「按鈕」"脫離"頁面內容區(qū)域。

解決方案示例2：從「其他」內容區(qū)域開始觸碰屏幕，進行頁面滾動，「按鈕」消失了。

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

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

顏色填充示例1。

重點代碼：在這個示例里面，我們不對「項目列表」的高度進行限制，直接讓內容在body中進行滾動。然后將body的背景顏色設置為橘紅色。

操作：進入頁面后直接向上拉動頁面，拉動到不可拖動為止。

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

說明：填充的顏色是可以定制的。

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

顏色填充示例2。

重點代碼：去除了Body的背景顏色，改成body的背景圖片并進行平鋪。

操作：同上一個示例。

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

說明：填充的部分并不屬于Body標簽本身。

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

顏色填充示例3。

重點代碼：將body的背景顏色去掉。

操作：同上一個示例。

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

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

疑問：如果body和html的背景顏色都去掉，又會顯示什么顏色呢？

顏色填充示例4。

重點代碼：body和html的背景顏色去掉。

操作：同上一個示例。

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

說明：默認的填充顏色是白色。

我們再回到顏色填充示例1。

重點代碼：與示例1相同

操作：這次我們在微信中打開，并改變操作方式，先上拉顯示橘紅色填充內容，再下拉顯示微信的黑邊(即顯示頂部"此頁面由XXX提供"文案)。再重新上拉，到不可拖動為止。

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

說明：微信內置瀏覽器修改了默認的顏色填充。

小結

滾動填充的顏色是可定制的。

滾動填充的內容并不是標簽的延伸，只會填充純顏色。

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

滾動填充的顏色默認值為白色。

微信會修改滾動填充的顏色值。

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

重點操作如下過程：

先將示例代碼在IOS內置瀏覽器safari中打開。

用雙指捏起整個頁面（即類似于圖片的縮小操作）。

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

說明：有一個容器包裹著我們的頁面。這個容器通常用于窗口縮放的時候，填充顏色。

雙指重復緩慢地捏起，放松整個頁面。觀察頁面變化。

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

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

先將示例代碼在微信內置瀏覽器中打開，重復上面操作。

用雙指捏起整個頁面（即類似于圖片的縮小操作）。

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

說明：在微信下，為了顯示「此頁面由 XXX 提供」的提示語，微信自己重寫了這個機制中的顏色，設置為黑色。

雙指重復緩慢地捏起，放松整個頁面。觀察頁面變化。

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

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

說明：微信重設顏色的機制和原生滾動回彈中縮小頁面漸變顏色的機制相沖突。

說明：無論是縮小頁面還是恢復頁面大小，微信都嘗試將容器背景顏色設置為黑色。

打開頁面，先滾動到底部，顯示了粉紅色，再滾動到頂部微信提示文案并顯示黑色，再滾動到底部顯示微信修改后的黑色，再縮小頁面，在滾動到底部。

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

說明：原生漸變顏色終止會覆蓋微信重設顏色的機制。

在上一個操作的前提下，重新滾動到頂部，顯示微信的提示文案，在滾動回底部。（整個過程不進行縮放）

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

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

說明：由于不進行頁面縮放，原生的漸變機制不會被觸發(fā)，原生部分不會進行顏色重置。

這一系列的操作解釋了這幾個問題：

為什么在微信中，先往上滾再往下滾動頁面，顏色的填充會變成了黑色，而不是body的背景色。因為微信對外部容器的背景色進行了重載。

為什么解決方案示例1中,「按鈕」看起來"脫離"了頁面。

因為微信對外部容器的背景色設置成了黑色，所以滾動到底部進行回彈的時候，頁面內容和按鈕之間的區(qū)域（即顏色填充區(qū)域）變成了黑色。而黑色給讓一種"空"的感覺，所以感覺到「按鈕」脫離的頁面內容的錯覺。

在safari中并不會改成黑色，即填充的顏色和Body的背景顏色一致。所以不會有黑色，不會產生微信上。「按鈕」脫離的頁面內容的錯覺。

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

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

fixed元素的定位并不是基于手機屏幕，因為縮放的過程中，「按鈕」隨著縮放進行了上移。

fixed元素的定位也不是基于body元素的，因為從回彈機制來說，「按鈕」早已經脫離了body區(qū)域(紅色框標記的顏色深粉紅色塊就是body的背景色)。

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

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

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

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

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

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

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

也解釋了第二個問題（頁面滾動，「按鈕」消失了）。

第二個問題是由于不改變顯示深度，所以「按鈕」仍處于「項目列表」容器內。

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

在滾動時，「按鈕」超出了「項目列表」的顯示區(qū)域，「項目列表」設置了overflow，不在其顯示區(qū)域的都不會被顯示。所以滾動過程中，「按鈕」逐漸消失。

而多出來的部分是回彈機制填充的內容。所以產生了顏色遮蓋了「按鈕」的錯覺。

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

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

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

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

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

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

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

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