Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Disable Bounce in a webview

Hi!

All in the title… I've made a search, and i found this code:
webview.disableBounce = true;

But, no error, and no change…

I've read all docs; but I think this isn't implemented yet…

Can you add this request or tell me how to use it?

Thanks, sorry for my bad english…

Ivan

— asked May 12th 2010 by Ivan Mathy
  • iphone
  • webview
3 Comments
  • the disableBounce is only available for ScrollView's, not WebView's.

    — commented December 10th 2010 by Alberto Marcone
  • For those has the same need,
    webview.disableBounce setting is available in 2.1
    but no idea why the latest API doc does not include such property.

    — commented September 17th 2012 by Bowie Poon
  • @Bowie Poon, you have no idea how much I want to thank you for pointing that!! this had to be in the docs already!! we were waiting for this property-fix for months now!!! :-)

    — commented October 16th 2012 by Alexandros Binopoulos

7 Answers

  • Hello,

    I was trying to disable the bounce for the webview so it would not "pull down" and show the shadow, this effect was needed for the UI of my app. As noted here and other posts this is not a option within TI. After some research I found a way to prevent the bounce. You will need to edit the TiUIWebView.m file in the classes folder of the TI SDK folder to incorporate this change.

    What I did was start with SDK 1.6.1 and duplicated the folder as 1.6.1_Web, then I opened TiUIWebView.m. Go to line 106 and add the following block of code after it.

    #define PAGE_VERTICAL_BOUNCE false
            if (!PAGE_VERTICAL_BOUNCE) {
                    for (id subview in webview.subviews)
                        if ([[subview class] isSubclassOfClass: [UIScrollView class]])
                            ((UIScrollView *)subview).bounces = NO;
                }
    

    Save the file and then select the Titanium SDK 1.6.1_Web in TI Developer or TIStudio which ever you are using.

    Maybe with a little more work this could be an option through the TI SDK.

    — answered May 16th 2011 by Brian Rowe
    permalink
    6 Comments
    • Tried this with current SDK 1.7.5 and works fine. One just needs to insert the above before [self addSubview:webview];, as line 106 shifted somewhat with newer SDK… clean your project, recompile and your done!
      Would be great if the disableBounce setting could be implemented in a future release though, as this workaround is somewhat cumbersome.jh

      — commented December 14th 2011 by Stephan Betke
    • I can also confirm this works perfectly well.. good job!

      — commented January 7th 2012 by P Sweeney
    • This works in 1.8.0.1 - Thanks for the fix!

      — commented January 18th 2012 by Matthew Hewes
    • Hi. I successfully implemented this into the class file, however, it has disabled bouncing in all webViews. Is there a way to alter/tweak this code so that when I define "disableBounce: true" it executes the above code from Brian, and if I don't have the line "disableBounce:" or "disableBounce: false" it does not execute the above code and the webView is then bounce-able? Thanks so much for your help guys!!

      — commented January 23rd 2012 by Kyle Affolder
    • Worked for me. Thanks very much @ Ufumbuzi Development

      — commented February 21st 2012 by Jonathan Andrew
    • this worked for me too! great! just one thing that I noticed is that the touchmove events inside the page seem disabled. Is it just me? (like scrollbars and such)

      — commented July 18th 2012 by Alberto Marcone
  • If you have a fixed size page and don't need any scrolling at all you can set this in the html and it prevents the webview from bouncing (and scrolling at all for that matter):

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

    I have tested this with an embedded Google Map and toolbar div that is absolutely positioned in the html (at the bottom of the page so that it replicates a tab bar). This code still allows the user to scroll the map but if you touch the nav element and try to drag it up, it no longer bounces. So it is a perfect solution for my use. However it would be better if there was a way to allow a webview to scroll and yet not bounce at the top and bottom of the page.

    — answered January 5th 2011 by brian kurzius
    permalink
    3 Comments
    • This is definitely worth checking out: http://code.google.com/mobile/articles/webapp_fixed_ui.html

      — commented January 10th 2011 by brian kurzius
    • does the trick for me, thanks!

      — commented May 25th 2011 by Kai De Sutter
    • If the view is within a scrollableView - this function breaks the functionality…

      — commented January 18th 2012 by Matthew Hewes
  • WebView now supports (undocumented for some reason) disableBounce property:

    https://github.com/appcelerator/titanium_mobile/commit/4963125f978da6e96eba6faa1e9d8c8cabfb8237

    — answered July 30th 2012 by Mikhail Yurasov
    permalink
    0 Comments
  • Here is how to add the disableBounce property to the web view - tested with Ti.UI.createWebView only, not with accessors. Version 2.0.1 of API. Need to open TiUIWebView.m in ~/Library/Application Support/Titanium/mobilesdk/osx/2.0.1.GA2/iphone/Classes. Go to line 116 and add the following code:

            if([TiUtils boolValue:[self.proxy valueForKey:@"disableBounce"]])
                [[self scrollview] setBounces:NO];
    

    Then in your project you can have the following:

        var webview = Ti.UI.createWebView({
    ...
            disableBounce:true,
    ...
        });
    

    Clean your project then build again. The WebView will no longer bounce. Enjoy!

    — answered July 11th 2012 by Christopher Shireman
    permalink
    0 Comments
  • Tested OK with 2.1.3GA (without any modification) / Ipad IOS 6.0

    Mikhail Yurasov has the solution "disableBounce", here is an example of a fullscreen window with a webview in it, webview keeps touchevents from the url you have loader, but disable bounce effects on the view …

    var myTiWindow= Ti.UI.createWindow({
        title:'examplWindow',
        backgroundColor:'white',
        navBarHidden:true,
        fullscreen:true
    });
    
    var myWebViewWithoutBounceEffect = Ti.UI.createWebView({
        url:'urlOfLocalOrRemotePage.html',
        width:Ti.UI.FILL,
        height:Ti.UI.FILL,
        touchEnabled:true, //optional
        disableBounce:true
    });
    
    myTiWindow.add(myWebViewWithoutBounceEffect );
    myTiWindow.open()
    

    Ivan Mathy, please mark post as answered.

    — answered October 4th 2012 by Quentin CASACCI
    permalink
    0 Comments
  • try horizontalBounce but i am not 100% sure if it works in the webview

    https://developer.appcelerator.com/apidoc/mobile/1.2/Titanium.UI.ScrollView-object

    — answered May 12th 2010 by Jeffrey Messick
    permalink
    0 Comments
  • I have used touchEnabled:false but this also disabled the touch event on the view. (but no scroll….)

    — answered May 18th 2010 by Stephane Pelamourgues
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.