讓overflow能正常執行在mobile browser

在手機上的瀏覽器,在tag上設定overflow的屬性,會發現只有部份的瀏覽器可以正常執行,像是ipad上的safari,就會出現無法滑動的情況,而android上的chrome,則會出現嚴重的左右晃動。以下是加了overflow的div。

html:

<div id="overflow" style="overflow:auto">
    <div>...</div>
    <div>...</div>
          .
          .
          .
</div>

此時會發現會有以上狀況,如果要讓手持裝置的瀏覽器可以正常運作,就必須將overflow-scrolling的屬性,設為touch。但是會發現另外一些問題,在ipad上的在overflow底下的內容,會發現有被截斷的問題,加入translateZ(0px)就可以解決這個問題。

css:

.overflow{
    -webkit-overflow-scrolling: touch;
}

.overflow > * {
    -webkit-transform: translateZ(0px);
}