Adding header view to WKWebView ScrollView

Question

Has anyone managed to successfully add a header or footer view to a WKWebView ScrollView?

I'm currently trying to do this using the method described here for a UIWebView Adding a header view to a UIWebView similar to Safari and Articles.

When this method is used in a WKWebView the content view origin.y is correctly changed but content is cut off at the bottom.

Using the scroll view content offset is also not possible as it breaks fixed positioned CSS elements in the web view.

Hi, I encountered same question. The existing answers are all about `UIWebView` and there is no solution for `WKWebview`. So I decide to place a bounty on this question. — Vayn, Dec 12 '15 at 15:52
can you provide any code or screenshot that satisfy your need? — Henson Fang, Dec 16 '15 at 05:57
I have a working implementation that does this by just adding a view to the webview's scrollView, did you try that and it did not work? — Daniel Galasko, Jan 07 '20 at 12:32

score 1 · Answer 1 · answered May 17 '17 at 12:30

In webView Delegate method

- (void)webViewDidFinishLoad:(UIWebView *)webView

add the following codebase,

mainWebViewObj.scrollView.contentInset = UIEdgeInsetsMake(headerView.frame.size.height,0.0,headerView.frame.size.height,0.0);
mainWebViewObj.scrollView.backgroundColor = [UIColor whiteColor];

if(![headerView superview])
{
    [webView.scrollView addSubview:headerView];
    [webView.scrollView bringSubviewToFront:headerView];
}
[mainWebViewObj.scrollView setContentOffset:
 CGPointMake(0, -mainWebViewObj.scrollView.contentInset.top) animated:NO];

this worked perfect for me. Hope it solves your problem.

score 0 · Answer 2 · answered Dec 17 '15 at 22:13

Here's an example that I think does as you describe. It offsets the web content by setting contentInset on the scrollView, and by offsetting the header view frame by a negative amount:

@implementation ViewController
{
    WKWebView*  _webView;

    UIView*     _headerView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    _webView = [[WKWebView alloc] initWithFrame: self.view.bounds];
    [self.view addSubview: _webView];

    [_webView loadRequest: [NSURLRequest requestWithURL: [NSURL URLWithString: @"http://www.stackoverflow.com"]]];


    [_webView.scrollView setContentInset: UIEdgeInsetsMake(100, 0, 0, 0)];

    _headerView = [[UIView alloc] initWithFrame: CGRectMake(0, -100, 375, 100)];
    _headerView.backgroundColor = [UIColor redColor];
    [_webView.scrollView addSubview: _headerView];
}

- (void) viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    _webView.frame = self.view.bounds;

    CGRect f = _headerView.frame;
    f.size.width = _webView.bounds.size.width;
    _headerView.frame = f;
}

Unfortunately this suffers from the same problem mentioned in the question where using content offset breaks fixed positioned CSS elements in the web view. — Keith Peck, Apr 05 '16 at 20:43

Adding header view to WKWebView ScrollView

2 Answers2