Turn off scrolling (bounces) in UIWebView?

[bonehead]

I'm embedding a UIWebView within one of my view controllers, and I'd like to prevent the view from "bouncing" every time the user taps on it. (The UIWebView behaves much like a UIScrollView with bounces turned on.) The frame I've provided for the UIWebView is big enough to fit its entire contents easily.

Does anyone know a way to lock down the UIWebView so it doesn't try to scroll like this?

[scottiphone]

There are bounce settings for UIScroll that you should be able to apply to anything that inherits from it.

[bonehead]

Originally Posted by scottiphone

There are bounce settings for UIScroll that you should be able to apply to anything that inherits from it.

Good point-- but UIWebView doesn't inherit from UIScrollView (it's just a UIView subclass).

[brianr]

Actually I'd like to do the same thing to a UITableView that has two (and only two) rows in it (for editing)... it's kind of annoying when you can swipe it and it bounces a little.

[scottiphone]

TableView does inherit from ScrollView so you should be able to control it directly.

Surprised webview doesn't as well. You could override the touches or better yet send in a bug report if it's something you think would be useful.

[MrMidi]

Greetings,

Though I have not found a way to turn this off through the SDK, I HAVE found a way to turn this off from your web content.

Using JavaScript just add this:

For jQuery users:

$().ready(function(){
    document.ontouchmove = function(e){ e.preventDefault(); }
});

And everyone else:

document.onload = function(){
    document.ontouchmove = function(e){ e.preventDefault(); }
};

Enjoy,

- Peter Schmalfeldt

[MaCeXpErTo]

Originally Posted by bonehead

I'm embedding a UIWebView within one of my view controllers, and I'd like to prevent the view from "bouncing" every time the user taps on it. (The UIWebView behaves much like a UIScrollView with bounces turned on.) The frame I've provided for the UIWebView is big enough to fit its entire contents easily.

Does anyone know a way to lock down the UIWebView so it doesn't try to scroll like this?

I think all you have to do is use a boolean value that controls whether the view bounces past the edge of content and back again.

I would use: @property(nonatomic) BOOL bounces

If the value is NO, scrolling stops immediately at the content boundary without bouncing.

I don't know if this is correct or not but I hope it helps.

[Marco]

MaCeXpErTo,

Can you give an example on how to use the @property(nonatomic) BOOL bounces to stop the UIWebView from bouncing?

Thanks

[RockStrongo]

Originally Posted by brianr

Actually I'd like to do the same thing to a UITableView that has two (and only two) rows in it (for editing)... it's kind of annoying when you can swipe it and it bounces a little.

Im having this same problem and everything that ive tried doesnt seem to work....anyone have an example of how to do this for UITableView?

Basically, I want to get rid of the bounces. I tried setting up the BOOL, but it didnt seem to work.

[markww]

I'm in a similar situation, my UIWebView is horizontally 1000px wide, and no bouncing there, but it still bounces vertically for some reason - even though it is 100px only 100px tall - the UIWebView size is 320px x 100px -

not sure why it wants to bounce vertically?

Anyone have any success with this? I can't turn off the default behavior in touchesmoved because I do need it for scrolling horizontally. I was also surprised that UIWebView does not inherit from UIScrollView.

Thanks

[coolblade]

Originally Posted by markww

I'm in a similar situation, my UIWebView is horizontally 1000px wide, and no bouncing there, but it still bounces vertically for some reason - even though it is 100px only 100px tall - the UIWebView size is 320px x 100px -

not sure why it wants to bounce vertically?

Anyone have any success with this? I can't turn off the default behavior in touchesmoved because I do need it for scrolling horizontally. I was also surprised that UIWebView does not inherit from UIScrollView.

Thanks

MaCeXpErTo, probably shouldn't try to answer things that you really have no clue on, there is no boucnes property in the UIWebView header and saying there is doesn't help anyone it just confuses people.

There is currently no way in the SDK to prevent the bounceing of a UIWebView, if the javascript fix works then that might be your best bet.

Another option would be to set the UIWebView at the full height of the content and then put that in a UIScrollView and set that contentHeight to the height of your viewable area. The downside to this is I doubt it will render a webview greater than 1000 pixels height.

Hope that helps.

[coolblade]

This seems to work too (although it's not part of the API):

@interface UIScrollView (extended)
- (void)setAllowsRubberBanding:(BOOL)allowsRubberBanding;
@end

@implementation InfoViewController

- (void)viewDidLoad{
	[(UIScrollView*)[webview.subviews objectAtIndex:0]	 setAllowsRubberBanding:NO];
}

@end

Originally Posted by coolblade

MaCeXpErTo, probably shouldn't try to answer things that you really have no clue on, there is no boucnes property in the UIWebView header and saying there is doesn't help anyone it just confuses people.

There is currently no way in the SDK to prevent the bounceing of a UIWebView, if the javascript fix works then that might be your best bet.

Another option would be to set the UIWebView at the full height of the content and then put that in a UIScrollView and set that contentHeight to the height of your viewable area. The downside to this is I doubt it will render a webview greater than 1000 pixels height.

Hope that helps.

[rajeshgautam]

This works...

Thanks for the info.

Originally Posted by coolblade

This seems to work too (although it's not part of the API):

@interface UIScrollView (extended)
- (void)setAllowsRubberBanding:(BOOL)allowsRubberBanding;
@end

@implementation InfoViewController

- (void)viewDidLoad{
	[(UIScrollView*)[webview.subviews objectAtIndex:0]	 setAllowsRubberBanding:NO];
}

@end

[flipconversion]

Originally Posted by rajeshgautam

This works...

Thanks for the info.

Just wanted to say thanks to coolblade, this works for me too. I wonder why it's not in the API =/

[krye]

Originally Posted by rajeshgautam

This works...

Thanks for the info.

Hey, for

[(UIScrollView*)[webview.subviews objectAtIndex:0]	 setAllowsRubberBanding:NO];

I get a warning "UIScrollView may not respond to '-setAllowsRubberBanding." (Messages without a matching method signature will be assumed t return 'id' and accept '...' as arguments.)"

Same thing if i change it to UIWebView. But it works. There is no longer a bounce on my WebView. Is it OK to disregard the warning?

[krye]

FYI: People are getting rejected for this

From Apple email:
"The non-public API that is included in your applications is setAllowsRubberBanding"

[V42]

Originally Posted by krye

FYI: People are getting rejected for this

From Apple email:
"The non-public API that is included in your applications is setAllowsRubberBanding"

I just got a rejection email for this reason. In case it helps anyone else, I figured out a solution that works for my needs. This solution is based on the javascript approach described earlier in this thread by MrMidi. The difference is that it disables scrolling/rubberbanding only when the content can fit entirely within the web view. If the content is larger than will fit, scrolling & rubberbanding are allowed.

<html>
  <head>
    <script>
      document.ontouchmove = function(event) {
        if (document.body.scrollHeight == document.body.clientHeight) event.preventDefault();
      }
    </script>
  </head>
  <body>
    <p>No scrolling for you!</p>
  </body>
</html>

[krye]

Originally Posted by V42

I just got a rejection email for this reason. In case it helps anyone else, I figured out a solution that works for my needs. This solution is based on the javascript approach described earlier in this thread by MrMidi. The difference is that it disables scrolling/rubberbanding only when the content can fit entirely within the web view. If the content is larger than will fit, scrolling & rubberbanding are allowed.

<html>
  <head>
    <script>
      document.ontouchmove = function(event) {
        if (document.body.scrollHeight == document.body.clientHeight) event.preventDefault();
      }
    </script>
  </head>
  <body>
    <p>No scrolling for you!</p>
  </body>
</html>

Cool, thank. I'll try that out.

[kelvinkao]

I would just put a transparent view on top of it to prevent the user from interacting with it. Yeah, I know, it's a hack.

[V42]

Originally Posted by V42

I just got a rejection email for this reason. In case it helps anyone else, I figured out a solution that works for my needs. This solution is based on the javascript approach described earlier in this thread by MrMidi. The difference is that it disables scrolling/rubberbanding only when the content can fit entirely within the web view. If the content is larger than will fit, scrolling & rubberbanding are allowed.

<html>
  <head>
    <script>
      document.ontouchmove = function(event) {
        if (document.body.scrollHeight == document.body.clientHeight) event.preventDefault();
      }
    </script>
  </head>
  <body>
    <p>No scrolling for you!</p>
  </body>
</html>

I ran into a small problem with this approach. Apparently, there is a difference in behavior with regards to the clientHeight attribute in different versions of the iPhone OS. The above code works fine in v3.0, but not in v2.2.1. For some reason, in v2.2.1, the clientHeight is always equal to the scrollHeight, so the code would prevent scrolling in all cases. I was able to fix this by using window.innerHeight instead of document.body.clientHeight.

[juggleware]

Since I was just using the UIWebView to display text, what worked for me was to set webView.userInteractionEnabled=NO.

Some more hints here: How To Place a UIWebView inside a UIScrollViewJuggleware Developers' Blog | Juggleware Developers' Blog