Wednesday, May 30, 2012

Stop UIWebView from "bouncing' vertically?


Does anyone know how to stop a UIWebView from bouncing vertically? I mean when a user touches their iphone screen, drags their finger downwards, and the webview shows a blank spot above the web page I had loaded?



I've looked at the following possible solutions, but none of them worked for me:



http://www.iphonedevsdk.com/forum/iphone-sdk-development/996-turn-off-scrolling-bounces-uiwebview.html



http://forums.macrumors.com/showthread.php?t=619534



http://stackoverflow.com/questions/173786/how-do-i-stop-a-uiscrollview-from-bouncing-horizontally



Thanks!



Brad


Source: Tips4all

13 comments:

  1. for (id subview in webView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
    ((UIScrollView *)subview).bounces = NO;


    ...seems to work fine.

    It'll be accepted to App Store as well.

    UPD: there's an easier way from ios 5.0:
    now UIWebView has UIScrollView property, so your code should look like this:

    webView.scrollView.bounces = NO;

    ReplyDelete
  2. I tried all of the above approaches, with no success... but I was looking at a project that makes it easy to create web apps as full fledged installable applications on the iPhone called QuickConnect, and found a solution that works, if you don't want your screen to be scrollable at all, which in my case I didn't.

    In the above mentioned project/blog post, they mention a javascript function you can add to turn off the bouncing, which essentially boils down to this:

    document.ontouchmove = function(event){
    event.preventDefault();
    }


    If you want to see more about how they implement it, simply download QuickConnect and check it out.... But basically all it does is call that javascript on page load... I tried just putting it in the head of my document, and it seems to work fine.

    ReplyDelete
  3. Well all I did to accomplish this is :

    [[webView.subviews objectAtIndex:0] setScrollEnabled:NO]; //to stop scrolling completely
    [[webView.subviews objectAtIndex:0] setBounces:NO]; //to stop bouncing


    Works fine for me...
    Also, the ticked answer for this question is one that Apple will reject if you use it in
    your iphone app.

    ReplyDelete
  4. If your webview doesnt need scrolling and doesnt need to handle links, you can set

    mywebview.userInteractionEnabled = FALSE


    so your webview will not respond to touches.

    ReplyDelete
  5. Warning. I used setAllowsRubberBanding: in my app, and Apple rejected it, stating that non-public API functions are not allowed (cite: 3.3.1)

    ReplyDelete
  6. Brad's method worked for me. If you use it you might want to make it a little safer.

    id scrollView = [yourWebView.subviews objectAtIndex:0];
    if( [scrollView respondsToSelector:@selector(setAllowsRubberBanding:)] )
    {
    [scrollView performSelector:@selector(setAllowsRubberBanding:) withObject:NO];
    }


    If apple changes something then the bounce will come back - but at least your app won't crash.

    ReplyDelete
  7. I traversed the collection of UIWebView's subviews and set their backgrounds to [UIColor blackColor], the same color as the webpage background. The view will still bounce but it will not show that ugly dark grey background.

    ReplyDelete
  8. On iOS5 only if you plan to let the users zoom the webview contents (e.i.: double tap) the bounce setting isn't enough. You need to set also alwaysBounceHorizontal and alwaysBounceVertical properties to NO, else when they zoom-out (another double tap...) to default it will bounce again.

    ReplyDelete
  9. In the iOS 5 SDK you can access the scroll view associated with a web view directly rather than iterating through its subviews.

    So to disable 'bouncing' in the scroll view you can use:

    myWebView.scrollView.bounces = NO;


    See the UIWebView Class Reference.

    (However if you need to support versions of the SDK before 5.0, you should follow Mirek Rusin's advice.)

    ReplyDelete
  10. Here's two newer potential solutions. Apparently, you can use jqtouch or pastrykit to disable scrolling. However, I haven't got these to work. You might be more competent.

    http://blog.jqtouch.com/post/285889760/turning-off-vertical-scrolling

    http://waynepan.com/2009/12/16/digging-into-pastrykit

    ReplyDelete
  11. http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

    This link helped me lot.....Its easy.. There is a demo..

    ReplyDelete
  12. I was annoyed to find out that UIWebView is not a scroll view, so I made a custom subclass to get at the web view's scroll view. This suclass contains a scroll view so you can customize the behavior of your web view. The punchlines of this class are:

    @class CustomWebView : UIWebview
    ...

    - (id) initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    // WebViews are subclass of NSObject and not UIScrollView and therefore don't allow customization.
    // However, a UIWebView is a UIScrollViewDelegate, so it must CONTAIN a ScrollView somewhere.
    // To use a web view like a scroll view, let's traverse the view hierarchy to find the scroll view inside the web view.
    for (UIView* v in self.subviews){
    if ([v isKindOfClass:[UIScrollView class]]){
    _scrollView = (UIScrollView*)v;
    break;
    }
    }
    return self;


    }

    Then, when you create a custom web view, you can disable bouncing with:

    customWebView.scrollView.bounces = NO; //(or customWebView.scrollView.alwaysBounceVertically = NO)


    This is a great general purpose way to make a web view with customizable scrolling behavior. There are just a few things to watch out for:


    as with any view, you'll also need to override -(id)initWithCoder: if you use it in Interface Builder
    when you initially create a web view, its content size is always the same as the size of the view's frame. After you scroll the web, the content size represents the size of the actual web contents inside the view. To get around this, I did something hacky - calling -setContentOffset:CGPointMake(0,1)animated:YES to force an unnoticeable change that will set the proper content size of the web view.

    ReplyDelete
  13. One of the subviews of UIWebView should be a UIScrollView. Set its scrollEnabled property to NO and the web view will have scrolling disabled entirely.

    Note: this is technically using a private API and thus your app could be rejected or crash in future OS releases. Use @try and respondsToSelector

    ReplyDelete