• 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代码即可:

  • 相关阅读:
    Mysql group by语句的优化
    Mysql join语句的优化
    jquery 只读
    【Unity Shaders】Transparency —— 使用渲染队列进行深度排序
    oracle多表查询之内连接,外连接语句总结
    String比较相等的问题探索
    markdown实例
    集合list里存储list,要遍历最底层list的对象元素的遍历方法
    System.out.println(i++); System.out.println(++i);的区别
    windows自动快捷方式
  • 原文地址:https://www.cnblogs.com/931298654yy/p/6122211.html
Copyright © 2020-2023  润新知