How to disable scrolling entirely in a WKWebView?

There are several methods to completely disable scrolling in WKWebView:

1. Using CSS Styles to Control

You can prevent scrolling by modifying the page's CSS. This method is applicable when you have control over the webpage content. You can set the overflow property of the body or html tags to hidden within the <style> tag of the HTML file or by directly injecting CSS.

css
body, html {
  overflow: hidden;
}

For dynamically loaded content, you can inject this CSS rule after the WKWebView finishes loading the page using the evaluateJavaScript method.

swift
webView.evaluateJavaScript("document.body.style.overflow = 'hidden';", completionHandler: nil)

2. Using UIScrollView Properties

Since WKWebView internally uses UIScrollView to handle scrolling, you can disable scrolling by modifying the properties of this UIScrollView. You can set the isScrollEnabled property of UIScrollView to false. This can be performed after initializing the WKWebView:

swift
if let scrollView = webView.scrollView {
  scrollView.isScrollEnabled = false
}

This method is straightforward and directly controls the scrolling capability of WKWebView through code.

3. Listening and Canceling Scroll Events

This method involves listening for scroll events and preventing them from occurring when triggered. You can listen for scroll events using JavaScript and prevent their default behavior.

swift
let script = "window.onscroll = function() { window.scrollTo(0, 0); };"
webView.evaluateJavaScript(script, completionHandler: nil)

This JavaScript code resets the page scroll position to the top whenever a scroll attempt is made.

Example: Initializing a WKWebView with Scrolling Disabled

This example demonstrates how to implement a non-scrollable WKWebView in your application by combining the modification of UIScrollView properties and injecting CSS. This should meet most requirements for disabling scrolling.

swift
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView

        if let scrollView = webView.scrollView {
          scrollView.isScrollEnabled = false  // Disable scrolling
        }

        let url = URL(string: "https://www.example.com")
        let request = URLRequest(url: url!)
        webView.load(request)

        // Inject CSS to disable scrolling
        let css = "body, html { overflow: hidden; }"
        let js = "var style = document.createElement('style'); style.innerHTML = '\(css)'; document.head.appendChild(style);"
        webView.evaluateJavaScript(js, completionHandler: nil)
    }
}

This example demonstrates how to implement a non-scrollable WKWebView in your application by combining the modification of UIScrollView properties and injecting CSS. This should meet most requirements for disabling scrolling.