為了項(xiàng)目在移動(dòng)端體驗(yàn)起來更加流暢，我們通常給元素設(shè)置 -webkit-overflow-scrolling: touch; 屬性來實(shí)現(xiàn)，具體原因,CSS參考手冊(cè)給了詳細(xì)的解釋
也就是說：這個(gè)屬性是通過設(shè)置滾動(dòng)的回彈效果，讓頁面在滑動(dòng)的時(shí)候看起來流暢。
但當(dāng)我在項(xiàng)目里面給 body 設(shè)置這個(gè)屬性，同時(shí)給某個(gè)元素設(shè)置 overflow:scroll，并且這個(gè)元素里面存在 fiexd 定位的子元素哭当，此時(shí)發(fā)現(xiàn)，固定定位元素?zé)o法顯示冗澈，即使我給固定定位的元素設(shè)置 z-index:980 來提高他的層級(jí)钦勘，問題依然存在。
剛開始以為是 ios 系統(tǒng)升級(jí)導(dǎo)致的亚亲，理由如下：
第一：這個(gè) -webkit-overflow-scrolling: touch; 屬性之前用過彻采，但是沒有遇到過今天所出現(xiàn)的定位元素?zé)o法顯示的問題。
第二：這個(gè)問題在 ios 下才會(huì)存在捌归，Android 不存在這個(gè)問題肛响。
經(jīng)過調(diào)試發(fā)現(xiàn)，如果去掉固定定位元素的父元素的 overflow:scroll 屬性惜索，定位元素就可以顯示特笋。但是通過去掉父元素滾動(dòng)的屬性來解決這個(gè)問題，不是一個(gè)好的方案巾兆。關(guān)鍵還是需要找到問題的本質(zhì)原因猎物。
經(jīng)過研究發(fā)現(xiàn)，這個(gè)問題很早就存在臼寄，現(xiàn)在也一直存在霸奕，而且 Android 之所以不存在這個(gè)現(xiàn)象溜宽，是因?yàn)?Android 壓根不支持 -webkit-overflow-scrolling: touch; 這個(gè)屬性吉拳，而 ios 存在問題，恰恰是因?yàn)?ios 支持了這個(gè)屬性适揉，但是它處理的機(jī)制是：
如果一個(gè)元素同時(shí)存在 -webkit-overflow-scrolling: touch; 和overflow:scroll屬性留攒，固定定位的元素會(huì)在容器發(fā)生滾動(dòng)的時(shí)候，跟著一起往上或者線下滾動(dòng)嫉嘀，同時(shí)固定定位元素也就失去了固定定位的效果炼邀。所以這也就是上面為什么，我設(shè)置了z-index:980依然無法解決問題 原因剪侮。
