CODEWITHSUNDEEP
htmlcordovascroll
MeltingDog
MeltingDog

Reputation: 15404

PhoneGap/Cordova: Prevent horizontal scrolling

I have an app built on Cordova and on some of my pages I am able to scroll horizontally out of my content into white space.

This is weird as I have nothing there that extends beyond my #wrapper, which is set to width: 100%.

So I was wondering if there was a way I could disable horizontal scrolling in the app altogether?

UPDATE:

Code on page as requested:

body {
    background-color: #fff;
    font-family:Arial, Helvetica, sans-serif;
    color: #b7b8b9;
    height: 100%;
    width: 100%;
}

iframe{
    border: none;
    width: 100%;
    /*margin-top: 50px;*/


   }

#header{
    height: 50px;
    width: 100%;
}


<body>
         <div id="wrapper">
        <div id="header">
            <div class="headerback"><a href="index.html">Home</a></div>
            <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div>
            <div class="headertitle"><h2>Get the Look</h2></div>

        </div><!--HEADER-->
    <iframe src="http://www.mbff.com.au/getthelook"></iframe>
    </div>
    </body>

This is what happens on horizontal scroll

Upvotes: 8

Views: 13153

Answers (6)

Yuriy N.
Yuriy N.

Reputation: 6087

In my case it was broken styling like below

<body>
  <div style="margin-left:5%; width:100%">Content</div>
</body>

which cause div to became horizontally bigger than body. I could see scroll when app run in browser. Set width to 90% (as it was initially intended) fixed the problem.

Generally, as it already pointed out here, enough to find element with wrong style which makes your page expanding horizontally and fix it.

BTW DisallowOverscroll was not helpful in above case.

Upvotes: 0

Script47
Script47

Reputation: 14530

For the sake of completeness, I thought the answer which makes use of the official method of doing such a thing via the preference tag should be added:

<preference name="DisallowOverscroll" value="true"/>

Supported by Android and iOS according the documentation.

Default: false

Set to true if you don't want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. on Android, they produce a more subtle glowing effect along the top or bottom edge of the content.

Upvotes: 2

Екатерина Дементьева
Екатерина Дементьева

Reputation: 73

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.

Upvotes: 6

Gustus
Gustus

Reputation: 111

Try adding the following code to your .html file: 

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);

Upvotes: 4

Ganesh karthik
Ganesh karthik

Reputation: 313

// 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;
    }
});

Upvotes: 4

Justus Romijn
Justus Romijn

Reputation: 16019

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?

Upvotes: 7

Related Questions