Scroll-Indikator

Es gibt bereits eine integrierte Browser-Funktion zur Anzeige der Scroll-Position. Man glaubt es kaum: Es ist die Bildlaufleiste (Scrollbar), und sie macht ihren Job hervorragend. Heutzutage gibt es sogar eine standardisierte Methode, um Scrollbars zu stylen.

body {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

Vielleicht möchten Sie diese mit -webkit- Styles kombinieren, um die beste Browser-Unterstützung zu erhalten. Zum Beispiel:

html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

Aber nehmen wir an, Sie sind weniger daran interessiert, die Scrollbar zu stylen, sondern möchten lieber einen eigenen Indikator bauen, der dem Benutzer zeigt, wie weit er nach unten gescrollt hat. Wie ein Fortschrittsbalken, der sich füllt, während man sich dem Ende eines Artikels nähert.

Mike Riethmuller hat einen Weg gefunden, dies auf außerordentlich clevere Weise zu tun!

Es ist nicht nur clever, sondern wird auch mit bemerkenswert wenig Code umgesetzt. Um es zu verstehen, entfernen wir die weißen Hintergründe des Headers und des Pseudo-Elements auf dem Body, um den verwendeten linear-gradient sichtbar zu machen.

Ah ha! Ein diagonaler Verlauf mit einer harten Kante. Wir können bereits sehen, was hier passiert. Während die Seite nach unten gescrollt wird, füllt sich der sichtbare Teil dieses Verlaufs immer mehr mit Blau. Der Trick besteht dann darin, alles außer einem schmalen Streifen dieses Verlaufs zu verbergen – daher die soliden Hintergründe auf dem Header und dem Pseudo-Element, die mit wenigen Pixeln Abstand platziert sind.

Der vielleicht cleverste Teil ist die Größenfestlegung des Hintergrundverlaufs. Man könnte denken, er deckt einfach den gesamten Hintergrund ab, aber nein. Würde man das tun, würde der Balken nie ganz voll werden, da er sich am oberen Rand der Seite befindet und der Verlauf erst am unteren Ende der Seite endet. Aufgrund der Platzierung in der Mitte der Seite in dieser Demo muss der Verlauf fast eine komplette Viewport-Höhe vor dem Ende der Seite abgeschlossen sein. Das sähe so aus:

background-size: 100% calc(100% - 100vh);

Außer, dass die feste Header-Größe ebenfalls berücksichtigt werden muss, also muss diese abgezogen werden. Am Ende sieht der Code so aus, als ob er eine ganze Reihe von „Magic Numbers“ (willkürlichen Werten) enthielte. Aber sie sind nicht wirklich willkürlich, da die meisten von ihnen genetisch miteinander verwandt sind. Hier ist ein Fork, der sie alle in Custom Properties umwandelt, damit Sie das sehen können.

html {
  --header-size: 125px;
  --scrollbar-height: 3px;
  --scrollbar-bg: #ddd;
  --scrollbar-progress-color: #0089f2;
}
header {
  position: fixed;
  top: 0;
  height: var(--header-size);
  width: 100%;
  background: white;
  padding: 1rem 2rem;
}
main {
  margin-top: calc(var(--header-size) + var(--scrollbar-height));
  padding: 2rem;
}
body {
  background: linear-gradient(
    to right top,
    var(--scrollbar-progress-color) 50%,
    var(--scrollbar-bg) 50%
  );
  background-size: 100%
    calc(100% - 100vh + var(--header-size) + var(--scrollbar-height) + 1px);
  background-repeat: no-repeat;
  margin: 0;
  font-family: "Open Sans", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  top: calc(var(--header-size) + var(--scrollbar-height));
  bottom: 0; width: 100%;
  z-index: -1;
  background: white;
}

Warum sollte man das tun?

• Es macht irgendwie Spaß.
• Einige Browser haben gar keine permanenten Scrollbars (denken Sie an Mobilgeräte oder die Einstellung „Scrollbalken nur beim Scrollen einblenden“ unter macOS).

Wenn Sie etwas wirklich Ausgefallenes machen wollen, wie die Anzeige des Prozentsatzes der Scroll-Position oder sogar noch schicker, wie die Anzeige einer geschätzten Lesezeit, die programmatisch berechnet wird – nun, das ist alles machbar, aber dafür befinden Sie sich im JavaScript-Territorium.