WKWebView+contentInset 使内容大小错误

Question

在 iOS 上，当您在 WKWebView 的滚动视图上设置 contentInset 时，似乎让网页视图认为页面内容比它大是。例如，如果您为大部分空白页面设置顶部或底部 contentInset，即使没有可滚动的内容，您也可以向下滚动页面。

这是预期的行为吗？是否有仍然允许我使用 contentInset 的解决方法？

Answer 1

问题是 WKWebView 似乎总是使用其框架作为其视口大小，而忽略了减去 scrollView 的 contentInset。我找到了 workaround by stephan-leroux.

想法是将 WKWebView 的框架设置为所需的视口大小，手动或使用自动布局约束。要恢复 contentInset 的 "scroll-under" 效果，禁用 scrollView 的 masksToBounds:

wkWebview.scrollView.layer.masksToBounds = NO;

Answer 2

weiyin 的（调整 Web 视图框架的大小）对我有用。

只是想分享一个代码示例：

CGFloat topInset = ...;
web.scrollView.layer.masksToBounds = NO;
[web.scrollView setContentInset:UIEdgeInsetsMake(topInset, 0, 0, 0)];
[web setFrame:CGRectMake(0, 0, web.width, web.height-topInset)];

Answer 3

四年过去了，问题依然存在...

效果很好，但如果您像我一样，可能会在弄清楚具体要做什么时遇到一些困难（尽管它真的很简单）。

所以这是对傻瓜（比如我）的简单解释：

将您的 Web View 嵌入 Wrapper View.
调整 Web View 的大小和位置，使其框架从 Wrapper View 精确插入您想要的内容插图。
在 Web 视图的 滚动视图上设置 clipsToBounds = false（在 Wrapper 视图上设置 true).
确保 Web 视图 (webview.contentInset = .zero) 上没有设置内容插入。

（这是默认值，一般情况下根本不需要设置）

完成：

Web 视图 上的 100% 内容插入行为，没有使用内容插入。

WKWebView+contentInset 使内容大小错误

WKWebView+contentInset makes content size wrong

webkit

ios

wkwebview

所以这是对傻瓜（比如我）的简单解释：

完成：