flex定位下overflow失效的問題研究

概述

這是我在寫移動端頁面遇到的問題及解決方法，記錄下來供以后開發時參考，相信對其他人也有用。

問題

之前寫移動端頁面，有一個頂條是導航條，需要固定在頁面頂部，並且里面的元素需要可以左右滾動。

但是當導航條設置fixed定位時，發現里面的子元素不能橫向滾動。

position: fixed;
top: 0;
left: 0;
overflow-x: auto;

最后通過加一個嵌套元素，給這個嵌套元素設置absolute定位解決：

//嵌套子元素
position: absolute;
top: 0;
left: 0;
overflow-x: auto;

另外還有一個隱藏系統滾動條的需求：

//less文件
&::-webkit-scrollbar {/*滾動條整體樣式*/
    display: none;
}

延伸1

在移動端其實並不推薦使用fixed定位，除了有一大堆問題之外還有渲染性能的問題。

但是如果使用的話，需要注意以下2點：

1. 居中不要用margin，而要用translate。否則會出現如下問題：在移動端上滑動頁面的時候，fixed定位元素會發生移動。（重排重繪導致）
2. 需要開啟GPU加速。

開啟GPU加速的代碼為：

//代碼1：純GPU加速
webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

//代碼2：可以帶位移的GPU加速
webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

延伸2

對於滾動，safari上面支持-webkit-overflow-scrolling屬性，控制safari的滾動回彈效果.

/* 當手指從觸摸屏上移開，會保持一段時間的滾動 */
-webkit-overflow-scrolling: touch; 

/* 當手指從觸摸屏上移開，滾動會立即停止 */
-webkit-overflow-scrolling: auto; 

所以為了更好的體驗，一般有如下兼容性寫法：

overflow-x: auto;
-webkit-overflow-scrolling: touch; 

注意，網上說-webkit-overflow-scrolling會有一些bug，所以建議用插件實現，比如betterscroll.js等。