美文网首页
iOS 13系统WKWebview滚动冲突问题

iOS 13系统WKWebview滚动冲突问题

作者: 水马101 | 来源:发表于2019-12-03 14:08 被阅读0次

我们的APP首页是类似今日头条的多页签布局, 可以横行滚动界面切换页签, 其中一个页签内有一个WKWebview子控件, 网页内容也是横向滚动的;
最近发现在iOS 13系统上, 滚动网页内容时, 整个界面会跟随滚动, 而且在iOS 12系统上没有问题。
由于该界面逻辑近期没有改动,所以推测可能是iOS 13新特性导致的;
搜索论坛发现已经有类似问题的讨论和解决,大致结论和解决方法如下:

  1. 问题直接原因似乎是网页CSS样式"overflow:hidden", 移除"overflow:hidden"是可以解决滚动冲突问题的。
  2. 问题仅出现在iOS 13+WKWebview的情况, 将WKWebview更换为UIWebview可以解决滚动冲突。
  3. 通过脚本注入修改网页CSS样式:
func webView(_webView:WKWebView, didFinish navigation: WKNavigation!) {
    insertCSSString(into: webView)
}

func insertCSSString(into webView: WKWebView) {
    let cssString = "body { overflow: scroll !important }"
    let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
    webView.evaluateJavaScript(jsString, completionHandler:nil)
}

另一种CSS修改方式:

func insertCSSString(into webView: WKWebView) {
    let jsString = "document.querySelectorAll('*[style]').forEach(el => el.style.overflow = 'scroll');"
    webView.evaluateJavaScript(jsString, completionHandler:nil)
}

对于我们的情况, 使用UIWebview替换WKWebview涉及的逻辑调整较大; 另外网页是其他部门提供的, 修改周期一般较长; 所以暂时采用代码注入的方式修改, 实际验证对既有逻辑无影响, 完美解决。

相关文章

网友评论

      本文标题:iOS 13系统WKWebview滚动冲突问题

      本文链接:https://www.haomeiwen.com/subject/tducgctx.html