本篇文章由: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

05-11 13:32