webentwicklung-frage-antwort-db.com.de

iOS-Überlauf-x (oder Position absolut) macht das Scrollen abgehackt?

Ich möchte, dass meine Webseite nur vertikal scrollbar ist. Also habe ich overflow-x:hidden; auf meinen .page-wrapper gesetzt. Mein .page-wrapper hält zwei absolut positionierte Ebenen übereinander. Wenn Sie auf eine Schaltfläche klicken, wird die oberste Ebene zur Seite verschoben (wie position:absolute; genannt) und die Website wird tatsächlich breiter als der 100% -Ansichtsbereich (dh, horizontal).

Um das horizontale Scrollen zu verhindern, habe ich overflow-x:hidden auf meinen .page-wrapper gesetzt.

Wenn ich das mache, ist das vertikale Scrollen meines normalen Inhalts wirklich fehlerhaft und funktioniert nicht richtig.

Irgendwelche Ideen, wie man das beheben kann

UPDATE

-webkit-overflow-scrolling: touch; scheint gut zu funktionieren, solange kein Javascript Höhen ändert. Siehe folgendes Beispiel. Was ich hier mache, ist die Aktualisierung der Höhe des Körpers auf die Inhaltshöhe der zweiten Ebene - es gibt also keinen leeren Bildlaufraum, wenn die obere Ebene nach links geschoben wird. Beim Zurückschieben der oberen Ebene entferne ich das Attribut style (das die Höhe festlegt) aus dem Körper. Danach ist die Schriftrolle wieder abgehackt.

function showInfos(show) {

    if ( show ) {
        $('#videos').addClass('slid');
        $('body').height($('#infos > .content').height());
        $('#page-wrap').addClass('no-overflow');
    } else if ( !show ) {
        $('#videos').removeClass('slid');
        $('#page-wrap').removeClass('no-overflow');
        $('body').removeAttr('style');
    }
}
iphoneioscssscroll
31
matt

Sie könnten versuchen, width:100% auf .page-wrapper einzustellen und dies auf overflow:hidden und position:relative einzustellen. Das könnte das horizontale Scrollen verhindern.

Aktualisiert am 10/12/2012

Danke für das Codebeispiel. Es hat mir wirklich geholfen, Ihre Absicht und das Problem beim Scrollen klarer zu sehen. Es sieht so aus, als ob Sie -webkit-overflow-scrolling benötigen. Fügen Sie -webkit-overflow-scrolling: touch; zu page-wrapper hinzu. Hier ist eine [aktualisierte Testseite], auf die diese Regel angewendet wird. Sie können die Testseite in meinem Kommentar unten vergleichen, um den Unterschied zu sehen.

32
Tim McElwee

Versuchen Sie es auf jedes Element anzuwenden:

* {
  -webkit-overflow-scrolling: touch;
}
53
Ahmad Mushtaq

Dies hat die Aufgabe für mich erledigt, so dass es auf keiner Seite ein Problem darstellt:

html {
  -webkit-overflow-scrolling: touch;
}
0
chdonncha