Detaillierte Erläuterung von vier Lösungen zur Implementierung von Inline-Scrolling auf Mobilgeräten

Bedürfnisse entdecken

Wenn nur ein Teil eines Bereichs gescrollt werden darf und der Rest nicht verschoben werden kann, welche Methode würden Sie verwenden?

Zunächst können wir diese Anforderung in zwei kleine zu lösende Probleme aufteilen.

• Teilbereich fixiert
  
• Der Rest des Bereichs scrollt
  

Teilbereich fixiert

1. Legen Sie für den Hauptteil der Seite die Höhe auf 100 % und den Überlauf auf ausgeblendet fest, um das native Scrollen der Seite zu deaktivieren und sicherzustellen, dass nur ein Bildschirm mit Inhalten angezeigt wird.
   
2. Der feste Bereich verwendet die absolute Positionierung.
   

Der Rest des Bereichs scrollt

Kernattribut Überlauf-y

MDNs Definition von overflow-y

Die Eigenschaft „overflow-y“ gibt an, ob Inhalt abgeschnitten, eine Bildlaufleiste gerendert oder überschüssiger Inhalt eines Blockelements angezeigt werden soll, wenn dieser an den oberen und unteren Rändern überläuft.
Die Eigenschaft „overflow-y“ gibt an, ob der Inhalt abgeschnitten und eine Bildlaufleiste gerendert werden soll oder ob der überlaufende Inhalt angezeigt werden soll, wenn ein Element auf Blockebene am oberen oder unteren Rand des Elements überläuft.

Einfach ausgedrückt: Wenn die Overflow-y-Eigenschaft in vertikaler Richtung überläuft, führen unterschiedliche Werte zu unterschiedlichen Leistungen. Um die Bildlauffunktion zu implementieren, müssen wir diese Eigenschaft auf Bildlauf setzen. Danach generiert der Browser eine Bildlaufleiste und verbirgt den überlaufenden Teil des Containers, unabhängig davon, ob der Inhalt des Blockebenenelements überläuft, und wird erst nach dem Scrollen angezeigt.

Zum Beispiel:

 .prüfen{
  Breite: 200px;
  /* Schlüsselstile */
  Höhe: 200px;
  Überlauf-y: scrollen;
  /* Die folgenden Stile sind irrelevant*/
  Hintergrund: #f14c5c;
  Farbe: #fff;
}
<div Klasse="Test">
  Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt. Dies ist nur ein Testinhalt.</div>

Das Wirkungsdiagramm sieht wie folgt aus:

Aus dem Beispiel von gerade eben können wir schließen, dass, solange die Höhe des Elements auf Blockebene begrenzt ist, es natürlich ist, zu erreichen, dass nur der Inhalt des Elements gescrollt werden kann, ohne andere Inhalte zu beeinträchtigen. Während des Implementierungsprozesses traten jedoch neue Probleme auf: Wie konnte eine genaue Wiederherstellung der Konstruktionszeichnungen erreicht werden?

Das Entwurfsdiagramm sieht wie folgt aus:

Die Höhe des gesamten Popup-Fensters passt sich der Seitenhöhe an. Die Positionen des Titelteils und des unteren Schaltflächenteils sind festgelegt. Die mittlere Liste muss die verbleibende Höhe einnehmen und der Inhalt ist scrollbar. Das gesamte Popup wird vom äußersten Div umschlossen und die untere Schaltfläche wird relativ dazu positioniert. Nachdem ich darüber nachgedacht hatte, habe ich vier Lösungen ausprobiert und sie mit Ihnen geteilt.

Lösungsbeschreibung

Das Kernproblem, das wir bestimmen müssen, ist die Höhe des mittleren Inhalts, d. h. die genaue Höhe bei unterschiedlichen Bildschirmgrößen.

gegen

Im Verhältnis zur Höhe des Ansichtsfensters wird das Ansichtsfenster gleichmäßig in 100 Einheiten unterteilt, d. h. 1 vh entspricht 1 % der Höhe des Ansichtsfensters.

Allerdings unterstützt die vh-Einheit niedrigere Versionen von Android und iOS nicht gut genug, und der WeChat-Browser X5-Kernel unterstützt sie nicht. Obwohl es auf den Blink-Kernel aktualisiert wurde, wird diese Lösung aufgegeben, um sicherzustellen, dass alles narrensicher ist. Darüber hinaus gibt es keine Möglichkeit, die unteren Schaltflächenränder präzise zu steuern.

Höhenprozentsatz

Ähnlich wie bei vh ist es unmöglich, die Ränder der unteren Taste präzise zu steuern, und der Anpassungseffekt ist nicht gut.

Berechnung

Die Berechnungseigenschaft calc kann die Probleme der beiden oben genannten Lösungen sehr gut lösen. Sie müssen nur height:calc(100% - 60px) festlegen, um den mittleren Teil genau auszufüllen und den Rand mit der unteren Schaltfläche beizubehalten.

Leider ist die Unterstützung für niedrigere Versionen von Android-Browsern, iOS-Browsern und Mainstream-Browsern, einschließlich des WeChat-Browsers, mangelhaft, sodass diese aufgegeben werden müssen.
Wenn die Kompatibilität besser ist, sollte die Calc-Lösung die nützlichste und eleganteste Implementierung sein.

js

Dies lässt sich allein mit CSS nicht erreichen, daher bleibt Ihnen nur die Möglichkeit, mit JS die für den Inhalt erforderliche Höhe dynamisch zu berechnen und festzulegen. Gleichzeitig treten bei dieser Methode kaum Kompatibilitätsprobleme auf und es handelt sich um eine Vorgehensweise der schrittweisen Verschlechterung.

Nicht zum Thema

Verstecke die hässlichen Bildlaufleisten.

Wenn man overflow-y:scroll direkt setzt, erscheint unter iOS immer ein hässlicher Scrollbalken. Wir können für das Element folgende Eigenschaften setzen:

 Rand rechts: -20px;
Polsterung rechts: 20px;

Mit einem kleinen Hack der Bildlaufleiste wird sie nie wieder angezeigt und die Benutzerinteraktion fühlt sich genauso an wie beim nativen Scrollen, nur eben mit einem besseren Erlebnis.

@prototype Danke für Ihre Erinnerung, dass das Festlegen der privaten Eigenschaft von webkit browser::-webkit-scrollbar die Bildlaufleiste flexibler steuern kann. Wenn Sie es nur verbergen müssen, reicht der folgende Code aus:

 ::-webkit-scrollbar{
  Anzeige: keine
}

Obwohl die meisten mobilen Browser den WebKit-Kernel verwenden, müssen wir ihn dennoch auf echten Geräten testen, bevor wir Schlussfolgerungen ziehen können. Wenn einige Browser diese Eigenschaft nicht unterstützen, können Sie trotzdem den kleinen Hack oben verwenden.

-webkit-overflow-scrolling: berühren

Bei iOS-Geräten kann die Verwendung von Overflow zur Simulation des Scrollens zu Verzögerungen führen. Dies kann durch die Einstellung von -webkit-overflow-scrolling: touch behoben werden. Der Grund dafür ist, dass iOS nach dieser Einstellung eine UIScrollView dafür erstellt und Hardware verwendet, um das Rendering zu beschleunigen.

Dieses Problem selbst ist nicht kompliziert und selbst wenn sich die Anforderungen ändern, wird die Implementierung sehr einfach. Ich hoffe jedoch, dass jeder Front-End-Mitarbeiter anhand dieses kleinen Beispiels bei der Überlegung der Anforderungen über vielfältigere Möglichkeiten zur Lösung des Problems nachdenken kann. Auch wenn dies aufgrund der Kompatibilität oder aus anderen Gründen vorübergehend nicht möglich ist, ist das in diesem Prozess erzielte Wachstum ebenfalls sehr vorteilhaft.

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit hilfreich sein kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.