• CSS3中-webkit-overflow-scrolling: touch 的使用方法详解


    -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

    auto

    使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
    touch
    使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
    -webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件,所以效率很高。但是这相对是耗更多内存的,最好在产生了非常大面积的overflow时才应用。
    需求是需要手动设置滚动高度的,js代码是

    el.scrollTop = 500;

    此时,我发现在IOS环境下,每次手动改变scrollTop后整个容器变成空白,但手指触摸一下内容就出来了,scrollTop是成功改变了的,只是内容绘制出错。(这里我个人判断是浏览器底层的问题,因为安卓不存在这问题)

    我通过用延迟加载,延迟设置滚动,或者是手动改变容器中的内容来强制重绘,可惜都不起作用,最终找到问题出在-webkit-overflow-scrolling: touch,因为当我把值设置为auto时BUG不存在。

    思路出来了,在手动设置scrollTop前,先关闭惯性滚动,待设置完成后重新开启即可。

    贴上解决代码:

    el.WebKitOverflowScrolling = 'auto';
    el.scrollTop = 500;
    el.WebKitOverflowScrolling = 'touch';

    查了一下网上的资料,H5端代码就不再敷述了,看一下Native处理

    -webkit-overflow-scrolling: touch 的流程如下:

    实际上,Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用

    要实现这个效果很简单,只需要加一行css代码即可:

  • 相关阅读:
    蚂蚁金服SOFAMesh在多语言上的实践
    2018第48周日
    git只拉取github部分代码的方法
    深入理解brew link命令
    openssl/ssl.h file not found
    react热加载失败
    pycharm批量清楚pyc、$py.class文件
    Hash history cannot PUSH the same path; a new entry will not be added to the history stack
    JavaScript indexOf() 方法,获取元素的位置;Object.keys()获取对象的所有key的数组
    JavaScript删除数组里的某个元素
  • 原文地址:https://www.cnblogs.com/931298654yy/p/6122211.html
Copyright © 2020-2023  润新知