Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts

Welche Produkte möchten Sie erwähnen?

Vor kurzem gab es eine Anforderung, oder genauer gesagt eine iterative Anforderung: das Hinzufügen einer Kopfzeilenübersicht (ähnlich dem Bild unten), damit Benutzer Marketingänderungen besser beobachten können. Der Anfang der Geschichte wurde damit leise angedeutet.

Bisher war diese Seite nur eine Liste mit Rezensionen (die man zum Laden aufrufen konnte). Um die Daten lesbarer zu machen, wurde für die Listenüberschrift ein festes Layout übernommen. Als ich diese Übersicht hinzugefügt habe, wurde es beim Produkt jedoch nicht erwähnt, also habe ich einfach und grob die Spaltenüberschrift in ein relatives Layout geändert, ok, und es zum Testen übermittelt.

Aber am nächsten Tag stellte ich fest, dass beim Hochfahren zu viele Daten geladen werden mussten. Nachdem die Listenüberschrift nach oben verschoben wurde, musste ich, wenn ich sie erneut filtern wollte, die Liste erneut nach oben wischen, um sie anzuzeigen. Diese Erfahrung war sehr schlecht. Mein Kollege hat daher vorgeschlagen, dass wir entweder nach dem Produkt fragen oder die Übersicht und Fixierung vornehmen.

Meine erste Reaktion war, dass das Produkt mich nach dem Stellen dieser Frage wahrscheinlich auffordern würde,只die Kopfzeile der Filterliste zu korrigieren (beachten Sie das Wort „nur“).

Anschließend kam es zu folgendem Gespräch:

Wie erwartet werden alle Ihre Befürchtungen wahr. Aber wie mein Kollege schon sagte, muss ich der Bitte nachkommen, auch wenn das bedeutet, dass ich weinen muss.

Nach Erhalt der Kommentare und Vorschläge wurde die klebrige Lösung hinzugefügt, die tatsächlich die optimale Lösung darstellt.

Teildecke

Der folgende Code ist die dom Struktur der Seite

<div id="demo" className={style.demo}>
  <h3 id="title" className="title">Dies ist eine Übersichtsüberschrift</h3>
  <div id="Inhalt" Klassenname="Inhalt">
    <div Klassenname = "Filterleiste">
      <h3>Dies ist die Listenüberschrift</h3>
      <h3>Filterbar</h3>
      <h3>Unten ist die Scroll-Liste</h3>
    </div>
    <ul Klassenname="Liste">
      {arr.map(({ Schlüssel, Bezeichnung }) => <li Schlüssel={Schlüssel}>{Bezeichnung}</li>)}
    </ul>
  </div>
</div>

JS-Implementierung

Da die Seite selbst einen Scroll-Event-Listener hat, war mein erster Gedanke, sie mit JS fertigzustellen. Aber ich hatte bereits Feierabend und es war Freitag, also hatte ich das Gefühl, dass ich es nicht innerhalb von 5 Minuten schaffen würde, also bin ich weggelaufen.

Versuchen wir nun, es mit JS zu implementieren. Sortieren Sie zunächst die Ideen:

• Beobachten Sie das Scrollen der Seite. Wenn die Oberkante des ul-Elements höher ist als die Titelhöhe vom oberen Seitenrand, fügen Sie eine CSS-Klasse hinzu, damit die Filterüberschrift oben bleibt.
• Wenn der Abstand zwischen dem ul-Element und der Oberseite kleiner oder gleich der Titelhöhe ist, löschen Sie die hinzugefügte Klasse und brechen Sie die Filterung der Oberseite des Kopfes ab

JS-Code

useEffect(() => {
  const demo = document.querySelector('#demo');
  const Inhalt = document.querySelector('#Inhalt');
  const titleHeight = document.querySelector('#title').clientHeight;
  lass fest = falsch;
  demo.addEventListener('scroll', (e) => {
    // Decke hinzufügen, wenn (!fixed && e.target.scrollTop >= titleHeight) {
      fest = wahr;
      content.classList.add('mit-fest');
    }
    //Obergrenze aufhebenwenn (fixiert && e.target.scrollTop < titleHeight - 5) {
      content.classList.remove('mit-fixiert');
      fest = falsch;
    }
  });
}, []);

Das hört sich nicht schwierig an, tatsächlich besteht jedoch bis zur Onlinestellung des Codes noch jede Menge Optimierungspotenzial, das im weiteren Verlauf analysiert und ergänzt wird.

CSS Viewport-Implementierung

JS scheint einfach, ist aber wie der bekannte Satz:這突如其來的噩耗，讓本不富裕的家庭雪上加霜.“ Auf dieser Art von Seite mit Dropdown-Laden haben wir bereits viele logische Verarbeitungen im Monitor durchgeführt. Wenn dies also mit CSS implementiert werden kann, versuchen Sie, sich nicht mit JS herumzuschlagen.

Sortieren Sie zunächst Ihre Gedanken und gehen Sie den Anforderungen des Produkts genau auf den Grund:

• Halten Sie den Abschirmkopf im Sichtbereich (Deckenmontage), um die Abschirmung zu gewährleisten.
• Zeigen Sie bei vielen Listendaten so viel von der Liste an wie möglich, d. h. die Übersichtsüberschrift ist nicht erforderlich.
• Durch Hochziehen wird die Liste geladen;

Wenn wir die oben genannten Ideen sortieren, stellen wir fest, dass die Übersichtsüberschrift ausgeblendet ist, wenn die Liste sehr lang ist. Dies kann einfach in Pseudocode ausgedrückt werden (vh ist die Ansichtsfenstereinheit, 100vh stellt die visuelle Höhe des gesamten Bildschirms dar):

 if (Titelhöhe + Filterbalkenhöhe + Listenhöhe > 100vh) {
     Titel.ausblenden();
   }

Wie verbergen Sie also die Übersichtsüberschrift, während die Filterüberschrift und -liste außerhalb des Ansichtsfensters bleiben?

Filterbalkenhöhe + Listenhöhe = 100vh

Wenn der Benutzer nach oben wischt und nur der Inhalt (Filterkopfzeile und Liste) genau eine Ansichtsfensterhöhe (100 vh) haben muss, wird die Übersichtskopfzeile ausgeblendet und die Filterkopfzeile schließt oben bündig ab. Dies wird mit CSS wie folgt erreicht:

// Kein vollständiger Code, weitere Details finden Sie in der Demo:
.demo {
 :global {
   .Titel {
     Höhe: 15vh;
     Zeilenhöhe: 15vh;
     Textausrichtung: zentriert;
     Rahmen unten: 1px durchgezogen #eee;
     Hintergrundfarbe: #fff;
   }
   .filter-bar {
     Höhe: 15vw;
     Hintergrundfarbe: #888;
     Anzeige: Flex;
     Elemente ausrichten: zentrieren;
   }
   .Liste {
     max-height: calc(100vh - 15vw);; // Die Einstellung hier ist sehr wichtig overflow: scroll;
     Hintergrundfarbe: rgba(127, 255, 212, .8);
   }

Beste Implementierung von CSS Sticky

Es gibt einen selten verwendeten position in CSS: sticky ;

Auszug aus der offiziellen MDN-Dokumentation:

Das Element wird entsprechend dem normalen Dokumentfluss positioniert und dann relativ zu seinem nächsten Scroll-Vorfahren und dem nächsten Vorgänger auf Blockebene (einschließlich tabellenbezogener Elemente) versetzt, basierend auf den Werten oben, rechts, unten und links. Die Sticky-Positionierung kann als eine Mischung aus relativer und fester Positionierung betrachtet werden. Elemente werden relativ positioniert, bis sie einen bestimmten Schwellenwert überschreiten. Danach werden sie fixiert.

Hier nehmen wir einige Änderungen basierend auf der JS-Lösung vor. Wir müssen nur die Positionierungseigenschaft der Filterleiste in eine klebrige Positionierung ändern, um die Abhängigkeit von JS zu entfernen.

.demo {
  maximale Höhe: 100 %;
  Überlauf: scrollen;
  .filter-bar {
    Position: klebrig;
    oben: 0;
  }
}

Die Demo-Klasse wirkt auf den äußersten DOM ( <div className={style.demo}> ) mit einer visuellen Höhe von 100 vh. Wenn der Inhalt die Höhe überschreitet, wird gescrollt. Das Filterleistenelement verwendet eine klebrige Positionierung. Wenn die Höhe des Demo-Elements größer als 0 ist, wird eine relative Positionierung verwendet, d. h. eine Positionierung in Form eines normalen Dokumentflusses. Wenn die Höhe kleiner oder gleich 0 ist, wird eine feste Positionierung verwendet, um den Effekt der Deckenabsorption zu erzielen.

Kontrast

Glauben Sie, dass CSS sehr einfach ist und mit wenigen Einstellungen erledigt werden kann? Es erfordert jedoch etwas Erfahrung (yun), um sicherzustellen, dass die Inhaltshöhe genau 100vh beträgt. Für diejenigen, die häufig H5 schreiben, glaube ich, dass die Sticky-Lösung auch etwas ist, auf das Anfänger stoßen werden. Tatsächlich ist es nicht nur einfach, sondern hat gegenüber JS auch mindestens zwei Vorteile:

• JS: Wenn Sie die Positionierung des Filterkopfs wie oben beschrieben in eine feste Positionierung ändern, können Menschen mit gutem Sehvermögen tatsächlich den Moment spüren, in dem die Liste springt, d. h. die Liste bewegt sich plötzlich die Filterleistenhöhe nach oben, um den Filterkopf auszufüllen und den normalen Dokumentfluss zu verlassen. (Die Lösung besteht darin, außerhalb des Filterkopfs eine zusätzliche DOM-Ebene hinzuzufügen und ihr eine feste Höhe zuzuweisen, sodass der Filterkopf außerhalb des normalen Dokumentflusses liegt, die Höhe aber immer noch vorhanden ist.)
• Wenn ich JS verwende, um die Neuanordnung von Dom-Elementen zu manipulieren, werde ich nicht viel über das Neuzeichnen und Neuaufnehmen sagen, über das Interviewer jedes Jahr sprechen. Der Leistungsverbrauch ist definitiv höher als bei der CSS-Implementierung.

Natürlich weist die Viewport-Lösung auch ein Kompatibilitätsproblem mit iOS-Telefonen auf. Da sich die Sichtbarkeit der Kopf- und Unterseite von Safari beim Verschieben ändert, sind die tatsächlichen 100 vh bei sichtbarer Leiste höher als die sichtbare Höhe des Bildschirms, was dazu führt, dass die Deckenkopfzeile blockiert wird. Obwohl es im Internet bisher viele Kommentare zu height: -webkit-fill-available； ist es für dieses Szenario unwirksam. Solange Sie sich jedoch auf 100vh verlassen, werden Sie mit diesem Dilemma konfrontiert. Safari ist zu seltsam und wird der nächste IE.

Nach der obigen Analyse wird das schwerwiegende Problem von 100vh in iOS Safari dazu führen, dass diese reine CSS-Lösung wie 100vh verschwindet. Aber für PC-Seiten, oder wie bei Ihnen und mir, wenn die Seite, auf der Sie schreiben möchten, in der APP ausgeführt wird (das heißt, es gibt keine Leiste), dann ist diese Lösung machbar. Alle Pläne erfordern spezifische Szenarien und Analysen. Niemand wird perfekt geboren. Dies dient lediglich dazu, Ihre Denkweise zu verbessern und Ihren Horizont zu erweitern.

Die Sticky-Lösung ist nicht auf 100 vh angewiesen und kann in 100 % geschrieben werden. Solche Sorgen gibt es also nicht. Im Vergleich dazu ist sticky die beste Lösung. Aber height: 100% ist ein Fass ohne Boden. Sie müssen beim HTML-Tag beginnen und durch Scrollen bis zum Containerelement schreiben.

Elastischer Boden

Nachdem wir über die teilweise elastische Deckenabsorption gesprochen haben, sprechen wir über eine häufige, selektive Bodenabsorption: Wenn der Seiteninhalt weniger als 100 vh beträgt, hoffen wir, dass Footer unten absorbiert wird. Wenn der Seiteninhalt mehr als 100 vh beträgt, befindet sich Footer im normalen Dokumentfluss, wodurch der sichtbare Inhaltsbereich größer wird, ohne dass das Erscheinungsbild durch zu wenig Inhalt beeinträchtigt wird, wie in der Abbildung dargestellt:

Es gibt immer noch viele Leute, die keine Positionierung wie im ersten Bild verwenden, weil sie der festen Überzeugung sind, dass der Inhalt ihrer Website niemals unzureichend sein wird. In der Vergangenheit war es jedoch gängiger, eine feste Positionierung unten zu verwenden.

Der elastische Boden verwendet min-height und absolute Positionierung, was sehr einfach zu implementieren ist. Der Kerncode überschreitet nicht 5 Zeilen CSS:

Körper{
  Position: relativ;
  Mindesthöhe: 100vh;
}

Fußzeile {
  Breite: 100 %;
  Position: absolut;
  unten: 0;
}

Das Prinzip besteht darin, dass die Mindesthöhe des Inhaltsbereichs ein Bildschirm ist und die Unterseite dann absolut relativ zum Bildschirm positioniert wird. Wenn der Inhalt größer wird und die Höhe 100 vh überschreitet, wird immer die Unterseite absorbiert, da dies auf bottom: 0; beruht. Darin liegt der Clou.

Für dieses Szenario ist height: -webkit-fill-available wirksam.

Damit ist dieser Artikel über die Schritte zur Implementierung der reinen CSS-Lösung für das Decken- und Bodensaugproblem im H5-Layout abgeschlossen. Weitere relevante CSS-Inhalte zu Decken- und Bodensaugproblemen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!