UIWebView within a UIScrollView like the Apple Mail.app

Question

I am trying to create a view similar to what you see when reading an email in the Apple iOS Mail.app, where you can pinch anywhere in the view to zoom the UIWebView in and out, and the header at the top stays the same size.

Also, scrolling up/down should scroll the entire view, not just the UIWebView. Scrolling left and right only scrolls the UIWebView left/right, it does not affect the header.

I've already tried using a UITableView with the UIWebView as a view within a cell or as a header/footer view, but I could not the scrolling and zooming do not work correctly.

I am now trying to put a UIWebView within a UIScrollView and can't seem to get the scrolling to work correctly this way either, but it seems to be a better approach than putting the UIWebView in a UITableViewCell.

Here is a simple representation of the view hierarchy I am trying to create:

UIScrollView
-- UIView (this is the "header" view)
-- UIWebView

I am not sure if I need to disable scrolling/zooming on the UIWebView, or how to handle the scroll events for the container UIScrollView or the UIWebView internal scrollview.

Thanks in advance for any examples and advice! Please let me know if I left out any details.

Answer 1

As long as you know that a web view contains a scroll view then you are fine but I would suggest the following and it worked for me once:

Add a UIView between the scroll view and the other elements inside it (including the web view) and let iOS handles the rest of the stuff (gestures and scrolling events)

UIScrollView
-- UIView (Just a wrapper as big as the content of the scroll view)
   -- UIView (this is the "header" view)
   -- UIWebView

Answer 2

I don't know if you already found a solution for your problem but I was facing the same and I wanted to share my solution.

I implemented a custom UIWebView with the same behavior as the native mail app. Maybe it will save someone some valuable time :) I know I wish there was such a thing when I was struggling.

This is the link to the project: https://github.com/catalinaturlea/HeaderWebView

If you find any problems or think about any improvements, please let me know.