我们的APP首页是类似今日头条的多页签布局, 可以横行滚动界面切换页签, 其中一个页签内有一个WKWebview子控件, 网页内容也是横向滚动的;
最近发现在iOS 13系统上, 滚动网页内容时, 整个界面会跟随滚动, 而且在iOS 12系统上没有问题。
由于该界面逻辑近期没有改动,所以推测可能是iOS 13新特性导致的;
搜索论坛发现已经有类似问题的讨论和解决,大致结论和解决方法如下:
- 问题直接原因似乎是网页CSS样式"overflow:hidden", 移除"overflow:hidden"是可以解决滚动冲突问题的。
- 问题仅出现在iOS 13+WKWebview的情况, 将WKWebview更换为UIWebview可以解决滚动冲突。
- 通过脚本注入修改网页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涉及的逻辑调整较大; 另外网页是其他部门提供的, 修改周期一般较长; 所以暂时采用代码注入的方式修改, 实际验证对既有逻辑无影响, 完美解决。
网友评论