stop a webview scrolling to the right?

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

Is it possible to use a webview and stop it from allowing scroll to the right into white space.

I have a fixed with on the webview, on the HTML inside it, but it still scolls.

I want the webview to scroll vertically so i tried to use touchEnabled:false but this means no vertical scroll.

So, i put it in a scrollableview, but the touchEnabled prevents scrolling on that.

Any ideas?

Platform - Titanium 1.7.1 and Android 2.2

2 Answers

Accepted Answer

What you can do is put your webview within a view that spans the entire height of the html page. You can then kill the scroll on your webview so that it doesn't scroll around inside your view, and you will get vertical scroll from your native view extending below the bottom border of your screen.

— answered 4 years ago by Anthony Decena
answer permalink
  • Thanks, but i am not sure i understand you.

    I put my web view in a standard view.. ok. Then kill the scroll on my webview... using touchEnabled:false?

    This stops the view being scrollable.. i cannot scroll it down.

    The height of the webview is potentially going to change, so i don't know its height.. i am using auto.

    // main container
        taxCalc.incomeTaxRates.wView = Ti.UI.createWebView({
        //taxCalc.incomeTaxRates.wViewContainer = Ti.UI.createScrollableView({
        taxCalc.incomeTaxRates.wViewContainer = Ti.UI.createView({

    — commented 4 years ago by Jez Manser

  • Thats pretty much the gist of it ... Im not sure of another way, but if you set that height to a high number, you'll see how the view scrolls.

    — commented 4 years ago by Anthony Decena

  • You may be able to get the height back from an app level event from within your webview ... may get a bit complex, but not unheard of.

    — commented 4 years ago by Anthony Decena

  • Show 9 more comments

Does anyone of you tried to use some Webkit supported meta tags...? e.g.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

— answered 4 years ago by Philipp Waldmann
answer permalink
  • I tried using "touchEnabled: false" as mentioned above. It stopped horizontal scrolling but I also couldn't click on any of my webpage elements.

    What I did to solve this was inject the meta tag mentioned above into the html page, and set the left and right properties of the webview to 0. I also got the width of the screen and used that as the content width in the meta tag.

    var webView1 = Titanium.UI.createWebView({
        scalesPageToFit: false,
        left: 0,
        right: 0,
        bottom: 0,
        top: 30,
        zIndex: 1,
        enableZoomControls: false,
        url: cbankMobile
    var scrwidth = Titanium.Platform.displayCaps.platformWidth;
    webView1.url =
            'javascript:(function evilGenius(){' 
                + 'var m=document.createElement("meta");'
                + ' = "viewport";'
                + 'm.content = "width=' + scrwidth + ',  user-scalable=no, initial-scale=2.5, maximum-scale=2.5, minimum-scale=2.5";'
            + '})();';

    — commented 4 years ago by Tommy Davenport

  • Just noticed I forgot a line of code that appends "m" into the document. It goes after that last line of code in function evilGenius.

    + 'document.getElementsByTagName("head")[0].appendChild(m);'

    — commented 4 years ago by Tommy Davenport

  • If in this meta tag width value is equal to device-width and web view width is smaller than device-width, then web view scrolls to right and left. If you change this value to same as web view width (or smaller) it doesn't scroll to sides any more.

    — commented 4 years ago by Mindaugas Vaičiūnas

  • Show 3 more comments

Your Answer

Think you can help? Login to answer this question!