Anzeige der Scroll-Position auf einer Seite mit CSS

Scrollen ist etwas, das wir alle im Web kennen und tun, bis zu dem Punkt, an dem es eine Erwartung oder vielleicht sogar eine Gewohnheit ist, wie Zähneputzen. Deshalb machen wir uns wahrscheinlich nicht zu viele Gedanken über die Gestaltung des Scroll-Erlebnisses – es ist eine bekannte Basisfunktion. Tatsächlich kommt die beliebte Aussage "es gibt keinen Fold" von der Idee, dass die Leute wissen, wie man scrollt und es keine willkürliche Linie gibt, unter die niemand geht.

Scrollbasierte Funktionen beinhalten tendenziell eine Art maßgeschneiderte Mischung aus CSS und JavaScript. Das liegt daran, dass es einfach nicht so viele native Funktionen gibt, um dies zu tun. Aber was wäre, wenn wir etwas erreichen könnten, das nur CSS verwendet? 

Nehmen Sie zum Beispiel diese geniale horizontale Scrollleiste mit CSS. Ich möchte etwas Ähnliches tun, aber scrollende Abschnitte anzeigen, anstatt kontinuierliches Scrollen zu erfassen. Mit anderen Worten, anstatt die Länge des Indikators während des Scrollens zu verlängern, möchte ich die Länge nur erhöhen, wenn ein bestimmter Abschnitt der Seite erreicht wurde.

So wie das

Hier ist mein Plan: Jeder Abschnitt trägt einen Indikator, der nicht erkennbar ist, bis er den oberen Rand des Bildschirms erreicht. Dort wird er durch Farbänderung sichtbar und bleibt am oberen Rand des Viewports haften.

Das genaue Gegenteil sollte umgekehrt passieren: Der Indikator folgt beim Zurückscrollen nach oben und tarnt sich wieder als für das bloße Auge unsichtbar.

Es gibt zwei Schlüsselkomponenten dafür. Erstens ändert der Indikator seine Farbe, wenn er sich in der Nähe des oberen Bildschirms befindet. Zweitens bleibt der Indikator am oberen Bildschirmrand stehen und bewegt sich nur nach unten, wenn sein Abschnitt nach unten gescrollt ist.

Das Zweite ist einfach zu tun: Wir verwenden position: sticky; für unsere Elemente. Wenn eine Seite gescrollt wird, haftet ein "sticky" Element an einer bestimmten Position auf dem Bildschirm innerhalb seines übergeordneten Containers.

Das bringt uns zu den Farbänderungen. Da der Hintergrund eines HTML-Dokuments standardmäßig weiß ist, verwende ich Weiß als Grundfarbe für die Demo. Das bedeutet, der Indikator sollte weiß aussehen, wenn er über der Grundfarbe liegt, und sich in eine andere Farbe ändern, wenn er über der Indikatorleiste am oberen Bildschirmrand liegt.

Hier kommen CSS-Blendmodi ins Spiel. Sie geben uns viele Möglichkeiten, eine Vielzahl von Farbkombinationen zu erstellen. Ich werde den `overlay`-Wert verwenden. Dieser ist von Natur aus ziemlich dynamisch. Ich werde die Mischung nicht im Detail erklären (da das CSS-Tricks Almanac dies bereits gut tut), aber unter Berücksichtigung dieser Demo werde ich sagen: Wenn die Hintergrundfarbe Weiß ist, ist die resultierende Vordergrundfarbe Weiß; und wenn der Hintergrund eine andere Farbe hat, ist die resultierende Farbe dunkler oder heller, je nachdem, mit welcher Farbe sie gemischt wird.

Die Indikatorstopps in der Demo sind schwarz. Aber wegen der Mischung sehen wir sie als weiß, weil sie auf einem weißen Hintergrund liegen. Und wenn sie über dem Indikatorcontainer-Element liegen, das ein schönes Violett hat, sehen wir einen dunkelvioletten Indikatorstopp, weil wir das Schwarz des Indikatorstopps mit dem Violett des Indikatorcontainers mischen.

Beginnen wir mit dem HTML

<div id="passageWrapper">
  <strong>Sections Scrolled ↴</strong>
  <!-- Indicator container -->
  <div id="passage"></div>
</div>


<!-- Indicator stop -->
<div class=passageStops></div>


<!-- First Section -->
<div class="sections">
  <!-- Content -->
</div>


<!-- Another indicator stop -->
<div class="passageStops"></div>


<!-- Second Section -->
<div class="sections">
  <!-- Content -->
</div>


<!-- Another indicator stop -->
<div class="passageStops"></div>


<!-- Third Section -->
<div class="sections">
  <!-- Content -->
</div>

Ziemlich einfach, oder? Ganz oben befindet sich ein "sticky" Container, der die Indikatoren aufnimmt, wenn sie oben ankommen. Von dort aus haben wir drei Inhaltsabschnitte, die jeweils mit einem Indikator versehen sind, der am oberen Rand haftet und sich mit ihm vermischt.

Hier ist das CSS

.passageStops {
  background-color: black; /* Each indicator stop is black */
  mix-blend-mode: overlay; /* This makes it appear white on a white background */
  width: 33.3%; /* Three sections total, so each section is one-third */
  top: calc(1em + 3px);
}


#passage, 
.passageStops{
  height: 10px;
}


#passageWrapper,
.passageStops {
  position: sticky; /* The container and stops should stick to the top */
  z-index: 1; /* Make sure the indicator and stops stay at the forefront */
}


#passage {
  background: violet; /* Will blend with black to make a darker violet indicator */
  margin: 0 0 20px 0;
}


#passageWrapper{
  background-color: white; /* Make sure we're working with white to hide indicator stops */
  height: 40px;
  top: 0px;
}


/* Each stop will shift one-third the width of the indicator container to cover the whole thing when the last section is reached. */
.passageStops:nth-child(4){ margin-left: 33.3%; }
.passageStops:nth-child(6){ margin-left: 66.6%; }


/* More styling, blah blah. */

Die Indikatoren (.passageStops) sind schwarz. Aber der `overlay`-Mischmodus lässt sie weiß erscheinen, wenn sie sich mit dem darunter liegenden weißen Hintergrund vermischen. Da es drei Abschnitte gibt, hat jeder Indikator eine Breite von einem Drittel.

Die Indikatoren haben position: sticky; mit einem `top`-Abstandswert. Das bedeutet, die Indikatoren haften, sobald sie die berechnete Position vom oberen Bildschirmrand erreichen. Wenn das passiert, vermischen sich die schwarzen Indikatoren, die weiß erschienen sind, mit dem violetten Indikatorcontainer, wodurch sie dunkelviolett erscheinen und die neue Scroll-Position auf der Seite darstellen.

Das Umgekehrte gilt auch. Wenn ein Indikator seine "sticky" Position verliert, bewegt er sich vom violetten Hintergrund der Indikatorleiste zum weißen Hintergrund der Seite und verbirgt sich wieder... als wäre er nie da gewesen!

Hier ist die Demo noch einmal

Das ist alles. Sie können vielleicht weiter damit experimentieren, indem Sie einen nicht-weißen Hintergrund mit einem anderen Mischmodus oder einen Gradienten für die Indikatorleiste oder Stopps verwenden.