it-swarm.com.de

Mobiler Überlauf: Scrollen und Überlauf-Scrollen: Berühren Sie // das "Bounce" des Viewports.

Auf einem Handy (Safari, Webviews, wo auch immer), geben overflow:scroll und overflow-scrolling: touch eine ziemlich glatte, coole Rolle.

Aber es macht die Seite "bounce" (Bereich unten eingekreist), was nicht der Fall ist, wenn Sie es nicht verwenden, aber was die Erfahrung etwas weniger "native" (und einfacher gesagt, soweit ich eine haben kann) macht Meinung dazu ist absolut unbefriedigend)

Gibt es eine Möglichkeit, dies zu verhindern? Vielen Dank für Ihre Hilfe/Hinweise/Antworten

that kind of suxx

25
Ben

Es ist mir gelungen, eine CSS-Problemumgehung zu finden, um das Abspringen des Ansichtsfensters zu verhindern. Der Schlüssel bestand darin, den Inhalt in 3 Divs mit -webkit-touch-overflow: Bildlauf einzuwickeln. Das endgültige Div sollte eine minimale Höhe von 101% haben. Darüber hinaus sollten Sie explizite feste Breiten/Höhen auf dem Body-Tag festlegen, die die Größe Ihres Geräts darstellen. Ich habe dem Körper einen roten Hintergrund hinzugefügt, um zu zeigen, dass der Inhalt jetzt springt und nicht der mobile Safari-Ansichtsbereich.

Quellcode unten und hier ist ein Plunker (dies wurde auch unter iOS7 GM getestet). http://embed.plnkr.co/NCOFoY/preview

Wenn Sie dies als Vollbild-App auf dem iPhone 5 ausführen möchten, ändern Sie die Höhe auf 1136px (wenn der Status der Apple-Mobile-Web-App-Statusleiste auf "schwarz-transparent" oder 1096px eingestellt ist). schwarz'). 920x ist die Höhe des Ansichtsfensters, wenn das Chrom der mobilen Safari berücksichtigt wurde).

<!doctype html>
<html>

<head>
    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
    <style>
        body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; }
        .no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
        .no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
        .no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; }
        p { display: block; height: 50px; }
    </style>
</head>

<body>

    <div class="no-bounce">
        <div>
            <div>
                <h1>Some title</h1>
                <p>item 1</p>
                <p>item 2</p>
                <p>item 3</p>
                <p>item 4</p>
                <p>item 5</p>
                <p>item 6</p>
                <p>item 7</p>
                <p>item 8</p>
                <p>item 9</p>
                <p>item 10</p>
                <p>item 11</p>
                <p>item 12</p>
                <p>item 13</p>
                <p>item 14</p>
                <p>item 15</p>
                <p>item 16</p>
                <p>item 17</p>
                <p>item 18</p>
                <p>item 19</p>
                <p>item 20</p>
            </div>
        </div>
    </div>

</body>

</html>
8
romiem

Hier gibt es einen großartigen Blogbeitrag:

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Zusammen mit einer Demo hier:

http://www.kylejlarson.com/files/iosdemo/

Zusammenfassend können Sie Folgendes für ein Div verwenden, das Ihren Hauptinhalt enthält:

.scrollable {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Das Problem, das Sie anscheinend beschreiben, ist, wenn Sie versuchen, innerhalb eines bereits oben angezeigten div nach oben zu scrollen. Dann wird die Seite nach oben und nicht nach oben nach oben gescrollt, und am oberen Rand der Seite wird ein Bounce-Effekt erzeugt. Ich denke, deine Frage ist die Frage, wie man das loswerden kann.

Um dies zu beheben, schlägt der Autor vor, dass Sie ScrollFix verwenden, um die Höhe von scrollbaren Divs automatisch zu erhöhen.

Es ist auch erwähnenswert, dass Sie Folgendes verwenden können, um zu verhindern, dass der Benutzer nach oben blättert, z. in einem Navigationselement:

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('noBounce') != -1 
|| event.target.className.indexOf('noBounce') != -1 ) {
    event.preventDefault(); }
}, false);

Leider gibt es noch einige Probleme mit ScrollFix (z. B. bei Verwendung von Formularfeldern), aber die Problemliste in ScrollFix ist ein guter Ort, um nach Alternativen zu suchen. Einige alternative Ansätze werden in dieser Ausgabe diskutiert.

Andere Alternativen, die auch im Blogbeitrag erwähnt werden, sind Scrollability und iScroll

19
Alasdair McLeay

du könntest es versuchen

$('*').not('#div').bind('touchmove', false);

fügen Sie dies bei Bedarf hinzu

$('#div').bind('touchmove');

beachten Sie, dass alles außer #div festgelegt ist

1
Tarik L
body {
  position: fixed;
  height: 100%;
}
0
user3941146

Diese Antwort scheint ziemlich veraltet zu sein und ist für heutige Anwendungen mit nur einer Seite nicht geeignet. In meinem Fall fand ich die Lösung dank diesem Artikel wo eine einfache, aber effektive Lösung vorgeschlagen wird:

html,
body {
  position: fixed;
  overflow: hidden;
}

Diese Lösung ist nicht anwendbar, wenn Ihr Körper Ihr Bildlaufbehälter ist.

0
Giulio G.