那些遇到的position-fixed無效事件

本篇文章由：http://xinpure.com/position-fixed-encountered-an-invalid-event/

第一次無效事件

事件主角: transform

應用環境: Chrome/FireFox

事件回顧:

這是在使用 iscroll js滾動庫的時候，遇到的問題

當時的需求是須要在滾動到必定的距離的時候，將一個 tab 列表固定到頂部，不隨頁面滾動

固定定位元素嘛，小事！咱們知道這是一個很是普通的需求，實現方式也比較簡單，那就是使用 position: fixed 就能夠將元素固定到瀏覽器的指定位置了

而我也照作了，使人無語的是，徹底沒有效果？！ (僅僅只是 position: absolute 的效果)

後來通過一番調試以後，發現是由於父元素有一個 transform 屬性，致使了這個問題的出現。

由於 iscroll 是基於 transform 屬性實現滾動的, 因此 iscroll 會經過實時修改元素的 transform 屬性以達到滾動的效果

也就是說，只要父元素若是存在 transform 屬性，子元素的 position: fixed 屬性無效。

Google:

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

"position: fixed" still do not cope with transform value

這個解釋好有道理！

連接中也有提到說給子元素添加 -webkit-transform: translateZ(0); 就能夠解決這個問題

我只能說親測無效！

百度:

http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

第二次無效事件

事件主角: -webkit-overflow-scrolling

應用環境: 手機Web應用

事件回顧:

在 Mobile Web 開發中，用戶體驗是個很是重要的點。

因此像平滑滾動的特性是少不了的，一般會使用 -webkit-overflow-scrolling 實現這一效果

該屬性控制元素在移動設備上是否使用滾動回彈效果。

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

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

不巧，此次我又有個將元素設置成 position: fixed 的需求

在有上次的經歷(transform)後，並無讓我長什麼記性，不過說實話，position 這本來就是一個特別簡單的一個屬性，又怎麼會。。。

只能說話音剛落，瞬間就蒙逼了！又是無效！心中草泥馬縱橫交錯！

最後也是發現，只要父元素的 -webkit-overflow-scrolling 屬性值爲 touch，子元素的 position: fixed 屬性就無效。

Google:

http://stackoverflow.com/questions/29695082/mobile-web-webkit-overflow-scrolling-touch-conflicts-with-positionfixed

http://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content#RemoveorOverride–webkit-overflow-scrolling

百度:

Not Found