Disable Bounce in a webview

You must Login before you can answer or comment on any questions.

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 4 years ago by Ivan Mathy
3 Comments
  • the disableBounce is only available for ScrollView's, not WebView's.

    — commented 3 years ago 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 2 years ago 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 2 years ago 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 3 years ago by Brian Rowe
answer 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 2 years ago by Stephan Betke

  • I can also confirm this works perfectly well.. good job!

    — commented 2 years ago by P Sweeney

  • This works in 1.8.0.1 - Thanks for the fix!

    — commented 2 years ago by Matthew Hewes

  • Show 3 more comments

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 3 years ago by brian kurzius
answer permalink
3 Comments
  • This is definitely worth checking out: http://code.google.com/mobile/articles/webapp_fixed_ui.html

    — commented 3 years ago by brian kurzius

  • does the trick for me, thanks!

    — commented 3 years ago by Kai De Sutter

  • If the view is within a scrollableView - this function breaks the functionality...

    — commented 2 years ago by Matthew Hewes

WebView now supports (undocumented for some reason) disableBounce property:

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

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!

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.

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

I have used touchEnabled:false but this also disabled the touch event on the view. (but no scroll....)

Your Answer

Think you can help? Login to answer this question!