WKWebView+contentInset 使内容大小错误

Posted 2023-02-23

【中文标题】WKWebView+contentInset 使内容大小错误

【英文标题】：WKWebView+contentInset makes content size wrong

【发布时间】：2015-11-25 16:49:03

【问题描述】：

在 ios 上，当您在 WKWebView 的滚动视图上设置 contentInset 时，似乎会让 web 视图认为页面的内容比实际更大。例如，如果您将一个大部分为空的页面设置为顶部或底部contentInset，您将能够向下滚动页面，即使没有可滚动的内容。

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

【参考方案1】：

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

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

wkWebview.scrollView.layer.masksToBounds = NO;

【参考方案2】：

weiyin 的 suggestion（调整 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)];

【参考方案3】：

四年过去了，问题依旧……

weiyin's answer 效果很好，但如果你和我一样，你可能会有点难以弄清楚到底该做什么（虽然它真的很简单）。

所以这里对傻瓜（比如我）做一个简单的解释：

将您的 Web 视图 嵌入到 Wrapper View 中。

调整您的 Web 视图 的大小和位置，使其框架从 Wrapper 视图 中精确插入所需的内容。

在Web 视图的滚动视图上设置clipsToBounds = false（在Wrapper 视图上设置true）。

确保Web 视图 (webview.contentInset = .zero) 上没有设置内容插入。

（这是默认设置，通常不需要设置）。

完成：

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

【讨论】：

滚动条是......向左8pts。（

@Zoltán 您可以随时将其移回：horizontalScrollIndicatorInsets。