CSS属性

作者: skoll | 来源:发表于2023-02-06 00:00 被阅读0次

    -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
    

    -webkit-text-size-adjust: none;

    overflow-scrolling: touch

    touch-action:none

    touch-callout

    object-fit: contain;

    text-size-adjust: 100% !important;

    MAC的官方文档没有safair相关的内容

    1 .https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
    2 .看起来这个文档比较老啊

    相关文章

      网友评论

          本文标题:CSS属性

          本文链接:https://www.haomeiwen.com/subject/nwbohdtx.html