11

I have a web page for testing purposes (https://storage.googleapis.com/htmltestingbucket/nested_scroll_helper.html) that just prints a counter of the scroll event the html has caught in a fixed header

When the WKWebView is the only scroll-able element in the fragment everything is fine and the WebView sends the scroll events to the page

If I want to add native elements above and below the WebView then things get much more complex.

UIScrollView  
    UILabel
    WKWebView
    UILabel

I know it's not good to have a WebView inside a ScrollView but I have to provide a single scrolling experience with hybrid content and proper scrolling events in the html document. I found plenty of questions on the matter but I was not able to create a full end-to-end solution.

2 Answers 2

5

Update: Okay took me a while to understand what you're trying to do.

I know you would like to keep the outer scrollView, but I'm pretty sure it's not possible to achieve what you want to do (only way could be if you set the outerScrollView.delegate = webView - but didn't work for me when I tried)

I think the best solution would be:

  1. remove your outer scrollView
  2. set the contentInsets for your webView to whatever height on top and bottom you need. E.g. for 100pt : webView.contentInset = UIEdgeInsetsMake(100,0,100,0);
  3. Add your UIElements as subView to your UIWebView instead of the UIScrollView (basically into the free space you created with your contentInsets)

Previously (Other way around):

  1. set up a height constraint of your UIWebView
  2. store the height constraint as IBOutlet in your UIViewController
  3. set webView.scrollView.scrollEnabled = NO; in your viewDidLoad or the storyboard
  4. as soon as the webView is loaded, extract its content height webView.scrollView.contentSize.height
  5. update the UIWebView height constraint with the value of its content height viaself.webViewContentHeightConstraint.constant = webView.scrollView.contentSize.height
  6. call [self.scrollView layoutIfNeeded]; to make sure your view gets rendered again

Don`t forget to do steps 4 & 5 whenever the webView did finish loading content

enter image description here

8
  • But how the webview will be aware of the scrolls?
    – Luda
    Feb 11, 2016 at 9:58
  • It won't because you wont scroll in the webview anymore. You will only have one scrollable view, that "moves" the webview. Thereby you have a perfect single scroll experience
    – MarkHim
    Feb 11, 2016 at 10:44
  • I get you, but that is the oposite of what we are looking for. I need the webview to be aware of the scroll while scrolling on it
    – Luda
    Feb 11, 2016 at 11:40
  • so you want the uiwebview to be aware that you are scrolling in the parent scrollView? If yes, I can adjust my answer. Otherwise, pls give me some more context
    – MarkHim
    Feb 11, 2016 at 11:47
  • Yes. Please adjust your answer
    – Luda
    Feb 14, 2016 at 12:17
0

You basically have a scrollview inside a scrollview. How do you suppose that would work? I would add the labels to the HTML in the WebView. Don't see any reason why they need to be native.

Alternatively, you could try to add the labels to the UIWebView's UIScrollView. That's it's first subview. Not sure if you need to adjust the scrollview insets. Injecting html probably would work more reliably.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.