现在很多for Mobile的H5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。

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

-webkit-overflow-scrolling : touch;

可用以下网页测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta charset="utf-8" />

        <title>scroll</title>

        <style type="text/css">

            .container {

                width : 300px;

                height : 50%;

                -webkit-box-sizing : border-box;

                position : relative;

                overflow-y : auto;

                background-color : cyan;

                -webkit-overflow-scrolling : touch;  /* liuhx:可以把这整行注释掉对比差别 */

            }

            ul {

                height: 50px;

            }

        </style>

    </head>

<body>

    <div align="center">

        <nav class="container">

            <ul>1</ul>

            <ul>2</ul>

            <ul>3</ul>

            <ul>4</ul>

            <ul>5</ul>

            <ul>6</ul>

            <ul>7</ul>

            <ul>8</ul>

            <ul>9</ul>

            <ul>10</ul>

            <ul>11</ul>

            <ul>12</ul>

            <ul>13</ul>

            <ul>14</ul>

            <ul>15</ul>

            <ul>16</ul>

            <ul>17</ul>

            <ul>18</ul>

            <ul>19</ul>

            <ul>20</ul>

        </nav>

    </div>

</body>

</html>

可以用手指滑动中间的蓝色区域，会发现回弹效果以及滚动得很快：


（点击图片查看大图）
如果把-webkit-overflow-scrolling那行注释掉，就会发现滚动得很慢。

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

Thread 1, Queue : com.apple.main-thread

#0	0x00086723 in -[UIScrollView initWithFrame:] ()

#1	0x004ec3bd in -[UIWebOverflowScrollView initWithLayer:node:webDocumentView:] ()

#2	0x001f1769 in -[UIWebDocumentView webView:didCreateOrUpdateScrollingLayer:withContentsLayer:scrollSize:forNode:allowHorizontalScrollbar:allowVerticalScrollbar:] ()

#3	0x01d571bd in __invoking___ ()

#4	0x01d570d6 in -[NSInvocation invoke] ()

#5	0x01d5724a in -[NSInvocation invokeWithTarget:] ()

#6	0x027fb6a1 in -[_WebSafeForwarder forwardInvocation:] ()

#7	0x027fb8ab in __44-[_WebSafeAsyncForwarder forwardInvocation:]_block_invoke_0 ()

#8	0x04ac753f in _dispatch_call_block_and_release ()

#9	0x04ad9014 in _dispatch_client_callout ()

#10	0x04ac97d5 in _dispatch_main_queue_callback_4CF ()

#11	0x01d09af5 in __CFRunLoopRun ()

#12	0x01d08f44 in CFRunLoopRunSpecific ()

#13	0x01d08e1b in CFRunLoopRunInMode ()

#14	0x01cbd7e3 in GSEventRunModal ()

#15	0x01cbd668 in GSEventRun ()

#16	0x00032ffc in UIApplicationMain ()

#17	0x00002ae2 in main at /Users/liuhx/Desktop/UIWebView_Research/WebViewResearch/main.mm:16

实际创建的是UIWebOverflowScrollView，它继承自UIScrollView，声明为：

@class DOMNode, UIWebDocumentView, UIWebOverflowContentView, UIWebOverflowScrollListener;

@interface UIWebOverflowScrollView : UIScrollView

{

    UIWebDocumentView *_webDocumentView;

    UIWebOverflowScrollListener *_scrollListener;

    UIWebOverflowContentView *_overflowContentView;

    DOMNode *_node;

    BOOL _beingRemoved;

}

@property(nonatomic, getter=isBeingRemoved) BOOL beingRemoved; // @synthesize beingRemoved=_beingRemoved;

@property(retain, nonatomic) DOMNode *node; // @synthesize node=_node;

@property(retain, nonatomic) UIWebOverflowContentView *overflowContentView; // @synthesize overflowContentView=_overflowContentView;

@property(retain, nonatomic) UIWebOverflowScrollListener *scrollListener; // @synthesize scrollListener=_scrollListener;

@property(nonatomic) UIWebDocumentView *webDocumentView; // @synthesize webDocumentView=_webDocumentView;

- (void)setContentOffset:(struct CGPoint)arg1;

- (void)_replaceLayer:(id)arg1;

- (void)prepareForRemoval;

- (void)fixUpViewAfterInsertion;

- (id)superview;

- (void)dealloc;

- (id)initWithLayer:(id)arg1 node:(id)arg2 webDocumentView:(id)arg3;

@end

其还有一个子View作为ContentView，是给WebCore真正用作渲染overflow型内容的layer的容器。

UIWebOverflowContentView的声明为：

@interface UIWebOverflowContentView : UIView

{

}

- (void)_setCachedSubviews:(id)arg1;

- (void)_replaceLayer:(id)arg1;

- (void)fixUpViewAfterInsertion;

- (id)superview;

- (id)initWithLayer:(id)arg1;

@end

再往底层跟，都是CALayer的操作。

以上两个类都是UIKit层的实现，需要WebCore有硬件加速的支持才有实际意义，相关的逻辑被包含在

ACCELERATED_COMPOSITING

这个宏里。

从SVN log看，在WebKit 108400版本左右才支持，所以iOS Safari应该是需要5.0。Android只在4.0以上支持。

从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用。

转载请注明出处：http://blog.csdn.net/hursing

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现的更多相关文章

  1. Mobile-H5网页快速滚动和回弹

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-sc ...

  2. ios客户端快速滚动和回弹效果的实现

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要给容器加一行css代码即可 -webkit-overflow- ...

  3. Mobile的HTML5网页内快速滚动和回弹的效果

    style="overflow: auto;-webkit-overflow-scrolling: touch; 这个可以让页面在Native端滚动时模拟原生的弹性滚动效果 下面是微信浏览器 ...

  4. -webkit-overflow-scrolling : touch 快速滚动 回弹 效果

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...

  5. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  6. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  7. 网页HTML代码：滚动文字的制作

    本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字 通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是 ...

  8. Android系统联系人全特效实现(下)，字母表快速滚动

    在上一篇文章中,我和大家一起实现了类似于Android系统联系人的分组导航和挤压动画功能,不过既然文章名叫做<Android系统联系人全特效实现>,那么没有快速滚动功能显然是称不上&quo ...

  9. RecyclerView 实现快速滚动

    RecyclerView 实现快速滚动 https://www.cnblogs.com/mamamia/p/8311449.html

随机推荐

  1. Apache新版配置虚拟主机的注意事项

    1.关于没有默认索引文件(index.php或者index.html)时,列出目录:需要开启模块 LoadModule autoindex_module modules/mod_autoindex.s ...

  2. 你的阅读造就了你 You are what you read

    在豆瓣上看到的一篇很有思想和正能量的文章,在这里请允许我用原创的方式来呈现给大家.如果你是在校的大学生或者研究生博士生,这篇文章会让你有很多的共鸣.如果你已真正的踏入这个社会,也将受益匪浅.   电脑 ...

  3. Werkzeug源码阅读笔记(三)

    这次主要讲下werkzeug中的Local. 源码在werkzeug/local.py Thread Local 在Python中,状态是保存在对象中.Thread Local是一种特殊的对象,它是对 ...

  4. win7系统还原教程

    当我们的win7系统出现故障了导致系统不能稳定运行而我们没有更好的解决办法时,我们一般的方式是对系统进行还原或重新安装win7系统了,本文主要讨论win7系统还原,抛开第三方软件不说,win7系统自带 ...

  5. android上下文

    在android中常常会遇到与context有关的内容 浅论一下context : 在语句 AlertDialog.Builder builder = new AlertDialog.Builder( ...

  6. GDI+ 填充背景时，非常多时候不起作用，GDI、GDI+配合运用

    在ONDRAW中运行GDI+ 填充背景时,不起作用,不知道什么原因 [cpp] view plaincopy Graphics graphics(pDC->GetSafeHdc()); Bitm ...

  7. 二、获取AccessToken

    二.获取AccessToken 1.官方文档: access_token是微信官方公众号调用接口的全局唯一票据,开发者调用任何接口都需要使用access_token,由于access_token有效期 ...

  8. java中关于线程间协作所用关键字synchronized，wait,notify的用法

    wait/notify()关键字适用于一个线程通知另一个线程所需的条件状态已就绪,最常用于线程在循环中休眠直到获取特定条件的场景. 例如,一个线程一直等待直到队列中有一个组件能够处理:当组件添加到队列 ...

  9. android UI-EditText的长度监听慎用TextWatcher

    在用户昵称的输入时,限定8个字符,本意是在输入超过8个时候,页面toast一个提示,就是下面的TextWatcher的监听,在afterTextChanged中处理. 原bug:huawei MT2- ...

  10. RPC介绍以及编程

    1 RPC介绍 RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协 议. RPC采用客 ...