现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生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

如果把-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时才应用。

版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/361.html

标签: scrolling

评论已关闭