Search code examples
swiftuiscrollviewwkwebviewswift5

Disable horizontal scrolling for WKWebView


I know how to do this for UIWebView, but it is deprecated. I have figured out how to hide both the vertical and horizontal scroll indicators, disable scrollview bounces and disable the pinch gesture recognizer but still haven't found a way to wholly disable horizontal scrolling in the webview. Any help would be appreciated, below is my WebView.Swift.

struct WebView: UIViewRepresentable
{
    let request: URLRequest
    var webView: WKWebView?
    
    init (request: URLRequest)
    {
        self.webView = WKWebView()
        self.request = request
        webView?.scrollView.showsHorizontalScrollIndicator = false
        webView?.scrollView.showsVerticalScrollIndicator = false
        
        webView?.scrollView.pinchGestureRecognizer?.isEnabled = false
        webView?.scrollView.bounces = false
    }
    
    func makeUIView(context: Context) -> WKWebView {
        return webView!
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(request)
    }
    
    func goBack()
    {
        webView?.goBack()
    }
    
    func refresh()
    {
        webView?.reload()
    }
    
    func goHome()
    {
        webView?.load(request)
    }
}

Solution

  • For this, you may use Coordinator. There is good explanation for their.
    Create class Coordinator in your UIViewRepresentable. Add UIScrollViewDelegate to class. In makeUIView, set webView?.scrollView.delegate = context.coordinator.
    In Coordinator, you need this function.

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if (scrollView.contentOffset.x > 0){
            scrollView.contentOffset = CGPoint(x: 0, y: scrollView.contentOffset.y)
        }
     }
    

    And now, horizontal scroll not work!
    All code

    import WebKit
    
    struct WebView: UIViewRepresentable {
        let request: URLRequest
        var webView: WKWebView?
        
        class Coordinator: NSObject, UIScrollViewDelegate {
            var parent: WebView
            
            init(_ parent: WebView) {
                self.parent = parent
            }
            
            func scrollViewDidScroll(_ scrollView: UIScrollView) {
                if (scrollView.contentOffset.x > 0){
                    scrollView.contentOffset = CGPoint(x: 0, y: scrollView.contentOffset.y)
                }
             }
        }
        
        func makeCoordinator() -> Coordinator {
            Coordinator(self)
        }
        
        init (request: URLRequest) {
            self.webView = WKWebView()
            self.request = request
            webView?.scrollView.showsHorizontalScrollIndicator = false
            webView?.scrollView.showsVerticalScrollIndicator = false
            
            webView?.scrollView.pinchGestureRecognizer?.isEnabled = false
            webView?.scrollView.bounces = false
        }
        
        func makeUIView(context: Context) -> WKWebView {
            webView?.scrollView.delegate = context.coordinator
            return webView!
        }
        
        func updateUIView(_ uiView: WKWebView, context: Context) {
            uiView.load(request)
        }
        
       // You funcs
    }