zoukankan      html  css  js  c++  java
  • 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代码即可:

  • 相关阅读:
    Oracle 11G单机 无网络环境静默安装
    Centos 7 编译安装llvm 8.0.0
    linux下测试读写
    Linux 初始化 init 系统(1):sysvinit
    自动挂载文件/etc/fstab功能详解
    虚拟机安装LINUX网络配置注意的问题
    rhel7报错整理
    16/4/4二代支付硬盘故障处理
    RedHat Enterprise Linux 7关闭防火墙方法
    Linux命令之awk数组使用范例
  • 原文地址:https://www.cnblogs.com/931298654yy/p/6122211.html
Copyright © 2011-2022 走看看