前言
在开发web页面时,发现position:fixed
在ios系统失效,其效果类似于position:absolute;
。因此,在做页面布局的时候,要尽量不使用固定定位进行布局。
了解-webkit-overflow-scroll
MDN上是这样定义的:
-webkit-overflow-scrolling
属性控制元素在移动设备上是否使用滚动回弹效果.auto
: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch
: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
在移动端ios系统上,在你用overflow-y:scorll
属性的时候,你会发现滚动的效果不理想,有点卡。这时候可以使用-webkit-overflow-scrolling:touch
这个属性,让滚动条产生滚动回弹的效果,就像ios原生的滚动条一样流畅。
常见bug
(1)页面偶尔会卡住不动
如果出现偶尔卡住不动的情况,那么在使用该属性的元素上不设置定位或者手动设置定位为static
或者:给元素增加个z-index值
(2)点击其他区域,再在滚动区域滑动,滚动条无法滚动
放弃产生定位的布局(fixed、absolute、relative)
(3)通过动态添加内容撑开容器,不能滑动
如果想通过动态添加内容来撑开容器,触发滚动,让子元素height+1
(4)滚动中 scrollTop 属性不会变化
在iphone上使用chrome浏览器而非safari,就不会出现此种问题。经过对比是 UIWebView和WKWebView 内核的问题,WKWebView 是正常的,而UIWebView还是会出现scrollTop 属性不会变化的问题
(5)手势可穿过其他元素触发元素滚动
在iphone上使用chrome浏览器而非safari,就不会出现此种问题。ios的UIWebView引起的
(6)滚动时暂停其他 transition
在iphone上使用chrome浏览器而非safari,就不会出现此种问题。ios的UIWebView引起的
使用position:absolute;
布局
使用position:absolute;
进行固定定位的布局,会避免不少麻烦!
1 |
|