PhoneGap/Cordova: Prevent horizontal scrolling

Try to debug your page in Chrome (webkit) with the exact dimensions of your device. This solves most rendering issues for me.

I do not know the specific issue here, but it looks like one of your elements is flowing outside of the wrapper. You could for example try this in your css:

div.wrapper { overflow: hidden; width: inherit; }

Although it might be a better idea to find out why your page is expanding horizontally?


I was looking for the solution to this problem for a long time. Finally I solved it in the following way. I set style for bodyand html tags:

position: fixed;
width: 100%;
height: 100%;
overflow: hidden;

After that I've added div to body and set the style for it:

overflow-y: auto;
height: 100%;

So, I have got fixed body, which contains div with vertical scroll bar.


// Phone Gap disable only horizontal scrolling in Android.

// Add this code in your Phone Gap  Main Activity.Initially Declare the variable 

private float m_downX;

//Then add this code after loadUrl

this.appView.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                // save the x
                m_downX = event.getX();
            }
            break;

            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP: {
                // set x so that it doesn't move
                event.setLocation(m_downX, event.getY());
            }
            break;
        }
        return false;
    }
});