1.-webkit-overflow-scrolling:touch控制元素在移动设备上面是否有滚动回弹效果,属性为auto、touch
auto
: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch
: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。使用touch可以让滚动条有滚动回弹效果,就像是ios原生的滚动体验一样
2.在safari上,使用了-webkit-overflow-scrolling:touch
之后,页面偶尔会卡住不动。
解决:
3.保证使用该属性的元素上没有设置定位,如果出现偶尔卡住不动的情况,那么在使用该属性的元素上不设置定位或者手动设置定位为static
4. 解决方法就是在webkit-overflow-scrolling:touch
属性的下一层子元素上,将height加1%或1px。从而主动触发scrollbar。
4.当你给一个元素设置过position:absolute;
或者position:relative;
后再增加-webkit-overflow-scrolling: touch;
属性后,你会发现,滑动几次后可滚动区域会卡主,不能在滑动,这时给元素增加个z-index
值就可以了。
5.如果ScrollView内添加了webkit-overflow-scrolling:touch属性,那么容器内的z-index在ios中会有问题,所以需要蒙层的组件,尽量不要放在
ScrollView中,如果无法避免可以考虑动态设置webkit-overflow-scrolling:touch属性