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
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.
-
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.
-
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….)