webView 之 webapp在ios中简单实现滑动，回弹，加速等效果

最新推荐文章于 2023-06-06 16:54:08 发布

lxm_780337

最新推荐文章于 2023-06-06 16:54:08 发布

阅读量1.3k

点赞数

分类专栏：完整项目学习搭建过程记录及问题解决

完整项目学习搭建过程记录及问题解决专栏收录该内容

26 篇文章 0 订阅

订阅专栏

webkit-overflow-scrolling来自safari原生控件的实现，工作原理是：在有这个属性的容器上，系统会创建了一个uiscrollview，应用于该元素并将之作为渲染对象，从而为我们实现体验流畅的触屏滑动

在Ios上的表现结果令人十分满意，并且网页滑动和区域滑动的冲突同样解决的很好

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

[css]view plaincopy 
   
 -webkit-overflow-scrolling : touch;

可用以下网页测试：

[html]view plaincopy 
   
 
   
 <!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>  

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

[plain]view plaincopy 
   
 
   
 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，声明为：

[cpp]view plaincopy 
   
 
   
 @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的声明为：

[cpp]view plaincopy 
   
 
   
 @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时才应用。

lxm_780337

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webView 之 webapp在ios中简单实现滑动，回弹，加速等效果

webkit-overflow-scrolling来自safari原生控件的实现，工作原理是：在有这个属性的容器上，系统会创建了一个uiscrollview，应用于该元素并将之作为渲染对象，从而为我们实现体验流畅的触屏滑动在Ios上的表现结果令人十分满意，并且网页滑动和区域滑动的冲突同样解决的很好要实现这个效果很简单，只需要加一行css代码即可：[c
复制链接

扫一扫