使用

-webkit-overflow-scrolling

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

auto

  使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

touch

  使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

非标准
该特性是非标准的,请尽量不要在生产环境中使用它!

尚未有相关规范。另在Apple提供的Safari CSS 参考文档中有所提及。

只在ios上有用

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

摘抄:

  1. 从SVN log看,在WebKit 108400版本左右才支持,所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。
  2. 从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件,所以效率很高。
  3. 从实际开发的角度讲,采用这样的做法相对是耗更多内存的,最好是在产生了非常大面积的overflow时才应用。

overflow:scroll 在ios 滚动卡顿的更多相关文章

  1. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  2. bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

    bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...

  3. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  4. 【转】iOS实时卡顿监控

    转自http://www.tanhao.me/code/151113.html/ 在移动设备上开发软件,性能一直是我们最为关心的话题之一,我们作为程序员除了需要努力提高代码质量之外,及时发现和监控软件 ...

  5. iOS应用卡顿分析

    1.屏幕显示图像的原理 显示器按照从上到下的方式,一行行扫描,扫描完成后显示器就呈现一帧画面,随后电子枪回到初始位置继续下一次扫描.为了把显示器的显示过程和系统的视频控制器进行同步,显示器(或者其他硬 ...

  6. css隐藏滚动条、移动端滚动卡顿的解决

    1.如果想保持容器能够滚动,同时不想看到丑陋的滚动条,chrome.firefox和移动端上不考虑兼容性直接 element::-webkit-scrollbar{ display:none } 2. ...

  7. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  8. 使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录

    给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto: ...

  9. overflow:scroll 在 iOS上滚动不流畅的问题

    添加下面属性: -webkit-overflow-scrolling: touch;

随机推荐

  1. R语言爬虫:爬取百度百科词条

    抓取目标:抓取花儿与少年的百度百科中成员信息 url <- "http://baike.baidu.com/item/%E8%8A%B1%E5%84%BF%E4%B8%8E%E5%B0 ...

  2. Java基础之instanceof和transient关键字用法

    instanceof 用于检测指定对象是否是某个类(本类.父类.子类.接口)的实例.Java中的instanceof也称为类型比较运算符,因为它将类型与实例进行比较. 返回true或false. 如果 ...

  3. ld: i386 架构于输入文件 bar.o 与 i386:x86-64 输出不兼容

    报错:ld: i386 架构于输入文件 foo.o 与 i386:x86-64 输出不兼容 或者:ld: i386 architecture of input file `foo.o' is inco ...

  4. PHP.52-TP框架商城应用实例-前台4-商品详情页-面包屑导航、AJAX浏览历史

    面包屑导航  思路:根据商品的主分类向上取出所有上级分类即可 1.在分类模型中增加取出所有上级分类的方法 /********** [面包屑导航]取出一个分类所有上级分类 **********/ pub ...

  5. 成都优步uber司机第五组奖励政策

    7月14日,成都优步uber团队发布了第五组用户分组.在传言要推出第四组的时候,心想事不过三吧,意外,现在第五组都出来了.一起看看成都优步司机第五组的详细内容!滴滴快车单单2.5倍,注册地址:http ...

  6. underscore.js 分析 第一天

    Underscore 是一个非常实用的Javascript类库. 通过研究他能提高自身的JS水平. 我们看到整个代码被 (function() { /*  代码 */ }.call(this)); 包 ...

  7. pg 与 oracle 比较

    所谓动态引擎,就是说比如有很多张表的Join,原始的做法是一开始就生成好这个执行计划,随后执行,但实际上很多表Join的时候,你一开始生成的那个执行计划很有可能是不对的. 那么动态执行计划就是指它可以 ...

  8. Selenium(Python)驱动Firefox浏览器

    我的版本是Firefox Setup 52.7.0.exe+geckodriver-v0.15.0-win64.zip, 把驱动geckodriver.exe放到Python安装目录下, 也可以指定驱 ...

  9. 接口测试工具postman(六)添加变量(参数化)

    1.添加全局变量并引用 2.通过设置请求前置配置变量 3.在Tests里面,把响应数据设置为变量 4.添加外部文件,引用外部文件中的变量和数据,此种场景就可以执行多次请求 1)配置文件,txt或者cs ...

  10. (C#)设计模式之装饰模式

    1.装饰模式 动态的给一个对象添加一些额外的职责,就添加功能来说,装饰模式比生成子类更加灵活.*装饰模式是为已有功能动态添加更多功能的一种方式.*装饰模式将原有类中的核心职责与装饰功能分离.简化了原有 ...