-webkit-overflow-scrolling: touc

CSS3 的 -webkit-overflow-scrolling: touch 可以让页面在Native端滚动时模拟原生的弹性滚动效果。

项目开发中用到该属性，但导致Native端在弹性滚动到边界时出现一个黑色背景的VIEW。

查了一下网上的资料，H5端代码就不再敷述了，看一下Native处理

-webkit-overflow-scrolling: touch 的流程如下：

实际上，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时才应用。

出现黑色背景View其实就是UIWebOverflowScrollView。这个UIWebOverflowScrollView只有当页面上产生滚动条的时候才会生成，也就是后加载，所以在模块运行之初去捕捉并设置这个VIEW是捕获不到且不起作用的。

处理思路：

在html端的JS中对滚动条进行监听判断，当页面出现滚动条时通知Native端。

本人在项目中使用 WebViewJavascriptBridge  建立H5端与Native端的桥接。Android版本的点这里 。

Native获取到页面出现滚动条的通知，再去捕获这个View并修改颜色为白色，当然颜色是按照你自己的设计来修改的，如果本身的APP为黑色，那不改也无妨。

代码如下：

if ([_aView isKindOfClass:[UIScrollView class]])

{

        _aView.backgroundColor = [UIColor whiteColor];

        //下侧的滚动条

        UIView *view = _aView.subviews[0];

        for (UIView *_inScrollview in view.subviews)

        {

                 NSLog(@"b—%@",_inScrollview);

                 _inScrollview.layer.backgroundColor = [UIColor whiteColor].CGColor;

        }

}

最后提一下，由于-webkit-overflow-scrolling: touch对内存消耗不小，通知Native的捕获事件尽量只做一次，节省开销。

资料来源：

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

marcuswestin/WebViewJavascriptBridge

jesse01/WebViewJavascriptBridge