CSS属性

2023-02-06 本文已影响0人 skoll

-webkit-overflow-scrolling:touch

1 .作用:控制元素在移动设备上是否使用滚动回弹效果
2 .

1 .auto:当手指从触摸屏移开，滚动立马停止
2 .touch:当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比

3 .使用场景：当使用overflow-y:sccroll的时候会发现滚动效果很木，很慢。这个时候就可以使用这个属性，让滚动条产生回弹效果，就像原生uos一样流畅
4 .bug 1

1 .使用touch属性，偶尔会卡住不动
2 .是在不行就用better-scroll这种库
3 .在使用这个属性的元素设置position:static:

5 .bug 2:添加动态内容不能滚动

1 .子元素的高度设置为本来高度的+1px，主动触发scrollbar
2 .min-height:"101%"或者height:calc(100%+1px)

6 .bug常见机型。ios8上面。safair对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scroll的网页，会创建一个UIScrollView，提供子layer给渲染模块使用
7 .其他bug

1 .滚动中scrollTop属性不会变化
2 .手势可以穿过其他元素触发滚动
3 .滚动是暂停其他transition

8 .总结

1 .所有可滚动的框架，设置了overflow滚动元素之后默认都是弹性效果了。在ios上面
2 .如果不像上心，直接better-scroll