在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题。
然后今天,我把demo放在拉勾网的简历的一个链接中,在拉勾网app里面点开,发现一个问题:
上下滚动的时候,设置了position:fixed的元素,在ios的-webkit-overflow-scrolling:touch机制下,产生了fixed的元素跟随内容一起滚动的问题。
此时fixed元素的表现就和position:absolute;一样。
what the fuck????
excuse me????
what happen????
这个问题我记得在前些年有人讨论过,以为是已经修复的问题。没想到今天在拉勾网中打开竟然会出现。然后我在其他手机和app上反复测试,只有拉勾网里点开会这样。
然后我做了个试验:
1.在内滚动容器里放一个fixed的小div1;
2.在内滚动容器外放一个fixed的小div2;
然后再手机上测试,结果:
在滚动时,div1发生跟随页面一起滚动的bug,而div2不会。
也就是说,虽然不知道是不是浏览器内核版本或者其他原因,但是,当fixed的元素不在内滚动容器内的时候,就不会受容器自身滚动效果的影响。
所以,以后除了规避fixed,也可以尝试将元素摘出滚动体外,以完成某些页面效果,如上下滑动时的伸缩/淡入淡出。
附上一些关于fixed问题的信息,难免有时效性,不过可作参考:
http://bradfrost.com/blog/mobile/fixed-position/
https://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
《解决Web移动端Fixed布局的方案(防止页面露底、overflow-scrolling、iOS下的一些细节处理》http://ju.outofmemory.cn/entry/261460