4. 研究 WKWebview 的子 view 和 html body 的关系
作者： hite和落雁
这个问题来自需求：当 webview 下拉 bounce 的时候，在漏出的部分显示自定义的 view。类似在微信打开一个公众号后显示的“此页面由 **** 提供”，这样的交互。
中间经过若干测试，实现此功能有三个关键点；
设置
webview.scrollView.backgroundColor = [UIColor clearColor];目的为了下拉整个页面时，能够漏出我们自定义 view。（这里需要指出的是，下拉页面出现bounce效果时，漏出的 是wkscrollview；为什么这样，我猜测是因为 Safari 渲染的时候，bounce 效果是出在wkscrollview上，可参看这个测试页面，请在 Safari 里打开）结合 1，将这个自定义 view，放在
WKWebview和WKScrollView之间（猜测，webview.scrollView是WKScrollView的代理对象，而WKScrollView是 的代理元素，是否真的这样需要看看源码）。添加自定义 view 到
WKScrollView里的时机是- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView，而不是
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation因为不同页面书写方式，导致有些样式会生效时机不同，页面加载完毕并不是个很好的时机。
在生成 webview 的时候，设置 webview.scrollView.backgroundColor = [UIColor clearColor]; 。特别的需要说明下，当 h5 在 body 上写内联样式 <body style="background-color:red">; 或者写 style 样式；或者外联 <link rel="stylesheet" href> 三种写法，去设置 body 的颜色，是否生效看不同的情况；
当设置的 body 颜色是
#ffffff白色时，不论什么时候去设置 body 颜色都不会覆盖webview.scrollView.backgroundColor的颜色。当设置的颜色是非白色时，会覆盖 `webview.scrollView.backgroundColor
`
通过对照 HTML 的 DOM 层级和 WKWebview 的层级，
有以下发现；
html 里下拉时， bounce 效果后面的背景元素是
WKScrollView，所以设置 body 颜色会设置到WKScrollView的背景色。html 里其他元素全部由
WKContentView嵌套。当整个页面是长页面需要分页时，会分多个WKCompositingView逐个显示；
使用上述方案实现下拉时显示自定义元素有个问题；
在开始滑动
scrollView时候，设置webview.scrollView.backgroundColor的颜色，会将 h5 自己设置的背景色覆盖，所以 h5 要尽量不要依赖 body 的背景色做滑动背景；某些页面，如测试页面2, 头部有个 `fixed
` 元素，下拉时也会漏出 bounce 背景色。此时如果背景色设置透明后出现一个很奇怪的 漏出，这时候不应该漏出。如果解决这个问题呢，如果真的要解决这个问题，可能需要去读 html 的样式，这样就比较麻烦了。
对问题 2 ，有个讨巧的方案就是将漏出的自定义元素放在 `fixed
` 元素的后面，如微信那样。具体样式可以将 测试页面2 放到微信里看效果。
如果真正要解决问题 2 ，目前还需要再找找方案，希望看到 webkit2 的源码后能有方案。
Last updated
