本篇文章由: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:
百度:
Not Found