如何让WKWebView根据内容固定滚动高度以避免无效滚动？

一、修复HTML内容的自适应样式 #

问题根源大概率是HTML没有正确设置视口和容器样式，导致计算出的高度异常。给加载的HTML添加以下配置：

• 在<head>里加入viewport标签，确保内容适配设备屏幕：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

• 给html和body设置样式，强制撑满容器且无多余滚动：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

这样HTML内容会自动适配WKWebView的容器尺寸，不会出现超出屏幕的高度。

二、禁用WKWebView的滚动功能 #

直接关闭WKWebView的滚动能力，从根源避免不必要的滚动：

// 可在创建WKWebView时或didFinish方法中设置
webView.scrollView.isScrollEnabled = false

三、修正内容高度计算逻辑 #

如果仍需获取准确的内容高度，建议改用document.documentElement.scrollHeight代替document.body.scrollHeight，部分场景下body的高度无法代表整个页面的实际高度：

webView.evaluateJavaScript("document.documentElement.scrollHeight") { (contentHeight, error) in
    guard let contentHeight = contentHeight as? CGFloat, error == nil else {
        return
    }
    print(contentHeight)
}

内容的提问来源于stack exchange，提问作者Mc.Lover