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;的实现
