Scrolling more than just the web content in a WKWebView


#1

I need to have another view below the web page in a WKWebView, so that the user can scroll down past the web content and see the other view’s content. I see in the documentation that I can access the WKWebView’s UIScrollView, but I can’t find any way to access the web content itself so that I can constrain my other view to be under it.

I’m doing this programmatically, not with a storyboard.

I can find a couple people asking similar questions on SO, but no good answers.


#2

My preferred way to do this is to inject a place for the view directly into the DOM with JavaScript. Basically you inject an extra DIV into the web page, and then you ask the web view where the DIV is, and then put your view there. The main tool I use is evaluateJavaScript(). For an example, see WebBook. That uses UIWebView, but WKWebView should behave the same for this purpose.

The key pieces to study are:

  • In Simple.html, look for <div class="embed" id="embed1"></div>. That’s the DIV. With JavaScript, you could inject that wherever you want rather than hard-coding it like I did.

  • In ViewController, look at rectForElement, which will tell you where the item is in view coordinates, and insertCustomView which actually builds the view and inserts it. Almost all of that method is just creating the view, the key pieces is the last line webView.scrollView.addSubview(v).

With those, you can insert your view directly into the scrollview and it should be at the right place and the right size and you can even interact with it.

I assume you could use a similar approach without injecting an extra DIV just by asking for the getBoundingClientRect() for the body element.


#3

Jay, could you describe a bit more what you’re trying to achieve? Is it not possible to put your WKWebView (and the other views below it) in a UIScrollView, so when you’re scrolled to the bottom of the web page, the scroll view starts scrolling?


#4

Thanks for asking! I assumed that since the WKWebView handles its own scrolling that I’d end up being able to scroll my web view and also scroll my outer view separately, which is not the desired behaviour. If the WKWebView automatically detects this situation and works appropriately, that would be great! Is that sort of thing documented anywhere?


#5

Thank you! I understand what you’re saying, and having the code there to read helps too! That should work. It’s disappointing that it has to be so messy, but I have a lot of control over the html content so it should be easy to do.


#6

I just did a quick test with a full-screen UIScrollView. Inside the scrollview is a webview filling the top half, and a very tall view below that. If you continuously scroll the webview to the bottom, it does not start scrolling the scrollview. But once you hit the bottom, if you start a new scroll inside the web view, it scrolls the outer scrollview, revealing the rest of the view below.

And yes, you can scroll the outer view separately from the web view, so it sounds like maybe it doesn’t suit what you’re trying to do.