使用

-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. Go语言中的运算符

    ## 1 概述Go语言提供了,算术,关系,逻辑,位,指针,赋值运算符.本篇整体说明一下. ## 2 算术运算 * \+ 相加* \- 相减* \* 相乘* / 相除* % 求余* ++ 自增* \-\ ...

  2. Java Web开发后端常用技术汇总

    技术名称及官网 Spring Framework Spring容器 http://projects.spring.io/spring-framework/ SpringMVC Spring MVC框架 ...

  3. vuejs中使用v-model对表单数据的收集

    表单收集的信息针对有text/textarea,checkbox,radio,select 举个例子: <!DOCTYPE html> <html lang="en&quo ...

  4. CF 741 D. Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths

    D. Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths http://codeforces.com/problemset/probl ...

  5. long 与int 比较问题

    long 与int 比较,在32位机器,sizeof都是 占用4个字节: 在window 64位也是占用4个字节 但是在Linux 64位,long占用 8个字节, int占用4个字节,这样比较就会有 ...

  6. 卷积神经网络CNN在自然语言处理中的应用

    卷积神经网络(Convolution Neural Network, CNN)在数字图像处理领域取得了巨大的成功,从而掀起了深度学习在自然语言处理领域(Natural Language Process ...

  7. 「暑期训练」「基础DP」免费馅饼(HDU-1176)

    题意与分析 中文题就不讲题意了.我是真的菜,菜出声. 不妨思考一下,限制了我们决策的有哪些因素?一,所在的位置:二,所在的时间.还有吗?没有了,所以设dp[i][j]" role=" ...

  8. CsvHelper文档-1前言

    CsvHelper文档-1前言 英文文档链接地址:CsvHelper Document 开源项目地址:CsvHelper 翻译于2018-1-5,原本可能会随时更新: 每一段代码都是经过我实际测试的, ...

  9. 1 wait notify

    wait/notify: wait()使线程停止,notify使wait状态的线程继续执行. wait()是Object类的方法,该方法用来将线程置入“预执行队列”,并在wait()方法处停止执行,直 ...

  10. python3对接聊天机器人API

    详情见http://api.qingyunke.com/智能机器人API接口说明支持功能:天气.翻译.藏头诗.笑话.歌词.计算.域名信息/备案/收录查询.IP查询.手机号码归属.人工智能聊天接口地址: ...