Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Turn off scrolling (bounces) in UIWebView?

boneheadbonehead Posts: 225Registered Users
edited August 2011 in iOS SDK Development
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?
Post edited by bonehead on
«1

Replies

  • scottiphonescottiphone Posts: 802Registered Users
    edited May 2008
    There are bounce settings for UIScroll that you should be able to apply to anything that inherits from it.
  • boneheadbonehead Posts: 225Registered Users
    edited May 2008
    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).
  • brianrbrianr Posts: 59Registered Users @
    edited May 2008
    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.
  • scottiphonescottiphone Posts: 802Registered Users
    edited May 2008
    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.
  • MrMidiMrMidi Posts: 4New Users
    edited July 2008
    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
  • MaCeXpErToMaCeXpErTo Posts: 149Registered Users
    edited July 2008
    bonehead wrote: »
    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. :D
    "I love this place"
  • MarcoMarco Posts: 69Registered Users
    edited August 2008
    MaCeXpErTo,

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

    Thanks
    Peace in Christ<br />
    Marco Napoli<br />
    <a href="http://www.ourlovingmother.org"; target="_blank">http://www.ourlovingmother.org</a>;
  • RockStrongoRockStrongo Posts: 176Registered Users
    edited September 2008
    brianr wrote: »
    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.
  • markwwmarkww Posts: 179Registered Users
    edited December 2008
    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
  • coolbladecoolblade Posts: 2New Users
    edited April 2009
    markww wrote: »
    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.
  • coolbladecoolblade Posts: 2New Users
    edited April 2009
    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
    
    coolblade wrote: »
    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.
  • rajeshgautamrajeshgautam Posts: 2New Users
    edited May 2009
    This works...

    Thanks for the info.
    coolblade wrote: »
    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
    
  • flipconversionflipconversion Posts: 83Registered Users
    edited July 2009
    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 =/
  • kryekrye Posts: 362Registered Users
    edited July 2009
    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?
    <a href="http://ineedcoffeetocode.com"; target="_blank">iNeedCoffeeToCode.com</a> <a href="http://rescuemyclassicmac.com"; target="_blank">RescueMyClassicMac.com</a> <a href="http://ryemac3.net"; target="_blank">RyeMAC3.net</a>
  • kryekrye Posts: 362Registered Users
    edited November 2009
    FYI: People are getting rejected for this

    From Apple email:
    "The non-public API that is included in your applications is setAllowsRubberBanding"
    <a href="http://ineedcoffeetocode.com"; target="_blank">iNeedCoffeeToCode.com</a> <a href="http://rescuemyclassicmac.com"; target="_blank">RescueMyClassicMac.com</a> <a href="http://ryemac3.net"; target="_blank">RyeMAC3.net</a>
  • V42V42 Posts: 2New Users
    edited December 2009
    krye wrote: »
    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>
    
  • kryekrye Posts: 362Registered Users
    edited December 2009
    V42 wrote: »
    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.
    <a href="http://ineedcoffeetocode.com"; target="_blank">iNeedCoffeeToCode.com</a> <a href="http://rescuemyclassicmac.com"; target="_blank">RescueMyClassicMac.com</a> <a href="http://ryemac3.net"; target="_blank">RyeMAC3.net</a>
  • kelvinkaokelvinkao Posts: 352Registered Users
    edited December 2009
    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.
    My dev blog:<br />
    <a href="http://www.kelvinkaodev.com"; target="_blank">http://www.kelvinkaodev.com</a>;
  • V42V42 Posts: 2New Users
    edited December 2009
    V42 wrote: »
    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.
  • jugglewarejuggleware Posts: 4New Users
    edited July 2010
    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
  • pppppp Posts: 1New Users
    edited August 2010
    hiho,

    thread is a little bit old, but we found a good solution to turn of webviews bouncing:

    the trick is to go to the subview (UIScrollView) and turn off their bounces and/or scrollEnabled, in our case implemented in the view controller in the viewDidLoad method.
    UIScrollView* sv = nil;
    for(UIView* v in self.myWebView.subviews){
    	if([v isKindOfClass:[UIScrollView class] ]){
    		sv = (UIScrollView*) v;
    		sv.scrollEnabled = NO;
    		sv.bounces = NO;
    	}
    }
    

    hope we could helpsomeone with the same problem :-)
  • Mike BradyMike Brady Posts: 1New Users
    edited September 2010
    Worked for me, thanks!
  • kornienkoskornienkos Posts: 3New Users
    edited September 2010
    [[[bioWebView subviews] lastObject] setScrollEnabled:NO];

    works for me
  • hayroobhayroob Posts: 2New Users
    edited September 2010
    kornienkos wrote: »
    [[[bioWebView subviews] lastObject] setScrollEnabled:NO];

    works for me

    The javascript is a better and more predictable way to do it, but if you're going to go this route you need to at least make sure it doesn't crash your app if they change something under the hood.

    id scrollview = [[bioWebView subviews] lastObject];
    if ([(UIScrollView *)scrollview respondsToSelector:@selector(setScrollEnabled:)])
    {
    [(UIScrollView *)scrollview setScrollEnabled:NO];
    }
  • jtruejtrue Posts: 3New Users
    edited October 2010
    kornienkos wrote: »
    [[[bioWebView subviews] lastObject] setScrollEnabled:NO];

    works for me

    One line is all it took for me. I put it in my viewDidLoad in my ViewController class. I tried the javascript but it only worked on certain pages. also, any page with embedded div content or iframes or dynamic javascript was preventing the javascript fix from working.


    [[[myWebLabel subviews] lastObject] setScrollEnabled:NO];
«1
Sign In or Register to comment.