StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I was able to do this by adding white subviews to the top and bottom of the WebView’s scrollView. I control the content of the WebView, so I know that white is OK - this won’t work if you are loading arbitrary content.</p> <pre><code>// _topCover and _bottomCover are ivar UIViews - (void)webViewDidFinishLoad:(UIWebView *)webView { // with cover views 300pt high, I couldn't scroll far enough to see the shadow, // even in portrait on an iPad, which gives you the longest scroll distance CGFloat coverage = 300; _topCover = [[UIView alloc] initWithFrame:CGRectMake(0, -coverage, webView.bounds.size.width, coverage)]; _bottomCover = [[UIView alloc] initWithFrame:CGRectMake(0, webView.scrollView.contentSize.height, webView.bounds.size.width, coverage)]; _topCover.backgroundColor = [UIColor whiteColor]; _bottomCover.backgroundColor = [UIColor whiteColor]; // in case the webView is resized, e.g. by rotating the device _topCover.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth; _bottomCover.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth; [webView.scrollView addSubview:_topCover]; [webView.scrollView addSubview:_bottomCover]; } </code></pre> <p>I run it it after the page loads so that <code>webView.scrollView.contentSize.height</code> will give me the correct height. I’m not sure how this will work if your pages are dynamically changing height. My page loads only once; if yours is reloading, you will want to skip running <code>alloc</code>/<code>init</code> on <code>_topCover</code> and <code>_bottomCover</code> after the first time for efficiency.</p> <p><strong>Update:</strong> I’m not sure that my use of <code>autoresizingMask</code>, above, is sufficient when the view rotates. You may need to put this in the <code>UIViewController</code> that contains your <code>UIWebView</code> to resize the covers after rotating:</p> <pre><code>- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation { CGFloat coverage = 300; _topCover.frame = CGRectMake(0, -coverage, self.webView.bounds.size.width, coverage); _bottomCover.frame = CGRectMake(0, self.webView.scrollView.contentSize.height, self.webView.bounds.size.width, coverage); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload