PhoneGap/Cordova: Vermeiden Sie horizontales scrollen

Ich habe eine app auf Cordova und auf einige meiner Seiten, die ich in der Lage bin zu scrollen horizontal aus meiner Inhalte in den weißen Raum.

Dies ist seltsam, da habe ich nichts, das geht über meine #wrapper, die width: 100%.

Also ich Frage mich, ob es war ein Weg, ich könnte deaktiviert das horizontale scrollen in der app insgesamt?

UPDATE:

Code auf der Seite wie gewünscht:

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>

PhoneGap/Cordova: Vermeiden Sie horizontales scrollen

Ist das scrollen von Inhalten, die bounce-Effekt?
Nein, es verhält sich so, als wenn ein div ist die Verlängerung aus Seite der Hülle - es ist nur Schriftrollen in weißen Raum etwas
Ich kann mir nicht scheint, das problem zu reproduzieren auf dem Gerät. Kannst du einen screenshot?
vielen Dank für die überprüfung! Haben adde screen-shot oben. Hinweis: wenn die Seite geladen wird erscheint es in Ordnung, aber wenn Sie nach rechts scrollen, das ist, was geschieht
Der code, den Sie ist wohl etwas fehlen - ich kann den Fehler reproduzieren. Ich denke, man kann versuchen, herauszufinden, das problem durch überprüfen der Elemente in der desktop-browser (nach der Skalierung der Fenster, die etwa die Größe des Telefons).
Ja, ich habe versucht. Ich kann nichts finden! Kennst du eine Möglichkeit, nur schalten Sie die horizontale Bildlaufleiste?
Nein. Ich glaube nicht, dass es auf jeden Fall, denn die Schnecke ist innerhalb der web-Ansicht und der Immobilie readonly.

InformationsquelleAutor MeltingDog | 2012-06-26

7

Versuchen, zu Debuggen Ihre Seite in Chrome (webkit) mit den genauen Maßen von Ihrem Gerät. Dies löst die meisten rendering-Probleme für mich.

Ich weiß nicht, die spezifische Problem hier, aber es sieht aus wie eines Ihrer Elemente fließt, ist außerhalb der Hülle. Sie könnten zum Beispiel versuchen, diese in Ihrem css:
```
div.wrapper { overflow: hidden; width: inherit; }
```
Obwohl es vielleicht eine bessere Idee, um herauszufinden, warum Ihre Seite expandiert horizontal?
- Ja, danke, Justus. Es war eine falsche Körper Breite auf meinem iphone bestimmte CSS
- Bestätigt ist dies richtig fix mit Cordova 6.3.1, läuft auf Android 6 und 7
InformationsquelleAutor Justus Romijn
6

Ich war auf der Suche nach der Lösung für dieses problem für eine lange Zeit.
Schließlich löste ich es in der folgenden Weise.
Ich legen Sie den Stil für bodyund html tags:
```
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
```
Danach habe ich Hinzugefügt div zu body und stellen Sie den Stil für Sie:
```
overflow-y: auto;
height: 100%;
```
So, ich habe Feste Körper, die enthält div mit der vertikalen Bildlaufleiste.
- funktioniert 100%, danke! gestimmt+
InformationsquelleAutor Екатерина Дементьева

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

Vielen, vielen Dank!

InformationsquelleAutor Ganesh karthik

4

Versuchen Sie, den folgenden code zu Ihrer .html-Datei:
```
document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false); 
```
- Dies hat verhindert, dass auch das vertikale scrollen.
- wie Sie diesen lsitener nach, dass ich versuchte removeeventlistener aber immer noch seine nicht scrollen
InformationsquelleAutor Gustus
2

Der Vollständigkeit halber, ich dachte, die Antwort, die von der offiziellen Methode, so etwas zu tun über die preference - tag Hinzugefügt werden soll:
```
<preference name="DisallowOverscroll" value="true"/>
```
Unterstützt, von Android und iOS nach der Dokumentation.

Default: false

Auf true festgelegt, wenn Sie nicht wollen, dass die Schnittstelle zur Anzeige von feedback, wenn der Benutzer einen Bildlauf hinter den Anfang oder Ende des Inhalts. Auf iOS, overscroll-gesten führen die Inhalte wieder auf die Beine, um seine ursprüngliche position. auf Android-erzeugen Sie eine subtilere glühen-Effekt am oberen oder unteren Rand des Inhalts.
- Hinweis: im technischen Sinne, das ist richtig, aber manche Menschen können erleben, sehr kleine overscrolling (in meinem Fall war es ein einziges pixel), und die Antwort, arbeitete bei diesem
InformationsquelleAutor Script47

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.