Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Die Verwendung des 'Overflow-Scroll-Gradient' zum Scrollen von Text ist vorteilhaft, da es dem Leser eine klare Struktur des Inhalts bietet. Dies ist besonders hilfreich bei längeren Artikeln und zusätzlichen Informationen. Also das Scrollen-Element ist eine weitere Möglichkeit, um überlappenden scrollbaren Inhalt zu ermöglichen. Wir haben eine Vielzahl von Informationen zusammengestellt und hoffen, dass sie nützlich sind!

Scrolling-Element Overflow-scroll-gradient

Das Scrolle-Element ermöglicht es, überlappenden scrollbaren Inhalt in CSS zu erstellen. Durch das Hinzufügen des Overflow-Scroll-Gradient wird dem Element ein Überblendungsgradient hinzugefügt, und mithilfe von WebKit Browsers anzuzeigen, dass mehr Inhalt gescrollt werden kann.

Auf GitHub sind weitere Informationen zum Overflow scroll gradient, während ein Beispiel zur Anwendung des Gradienten im im CodePen ist.

Erste Vorlage zum Scrollen-Element

Folgendes CSS erstellt also einen stilvollen Scrolle, für einen Textausschnitt, komplett mit einem Verlauf am oberen und unteren Rand, einem benutzerdefinierten Scrollbalken-Styling und einem "to scroll" Hinweis, der beim Schweben über den Scrollbereich verschwindet.

CSS zur ersten Vorlage:

/* --- Scrolle für Textauszug --- */

/* Container für den Scrollbereich */
.overflow-scroll-gradient {
    position: relative; /* Legt den Container relativ zum normalen Fluss des Dokuments positioniert fest */
    margin-bottom: 45px; /* Ein Abstand am unteren Rand des Containers */
}

/* Verlauf oben im Container */
.overflow-scroll-gradient::before {
    content: ""; /* Fügt keinen Inhalt hinzu, es wird verwendet, um den Verlauf zu positionieren. */
    position: absolute; /* Positioniert das Verlaufselement absolut innerhalb des Containers */
    top: 0; /* Positionierung am oberen Rand des Containers */
    left: 0; /* Positionierung am linken Rand des Containers */
    width: 100%; /* Setzt die Breite des Scrollbereichs auf 100% */
    height: 25px; /* Die Höhe des oberen Verlaufs */
    background: linear-gradient(
        rgb(245, 242, 240),
        rgba(245, 242, 240, 0.001)
    ); /* Ein vertikaler Verlauf von oben nach unten */
}

/* Verlauf unten im Container */
.overflow-scroll-gradient::after {
    content: ""; /* Fügt keinen Inhalt hinzu, es wird verwendet, um den Verlauf zu positionieren. */
    position: absolute; /* Positioniert das Verlaufselement absolut innerhalb des Containers */
    bottom: 0; /* Positionierung am unteren Rand des Containers */
    width: 100%; /* Setzt die Breite des Scrollbereichs auf 100% */
    height: 25px; /* Die Höhe des unteren Verlaufs */
    background: linear-gradient(
        rgba(245, 242, 240, 0.001),
        rgb(245, 242, 240)
    ); /* Ein vertikaler Verlauf von oben nach unten */
}

/* Der Scrollbereich selbst */
.overflow-scroll-gradient__scroller {
    overflow-y: scroll; /* Ermöglicht das Scrollen des Inhalts nur in vertikaler Richtung */
    background: #fdfdfd; /* Hintergrundfarbe des Scrollbereichs */
    width: auto; /* Passt die Breite des Scrollbereichs automatisch an den verfügbaren Platz an */
    height: 400px; /* Höhe des Scrollbereichs */
    padding: 15px 15px; /* Innenabstand des Scrollbereichs */
    font-size: 95%; /* Schriftgröße im Scrollbereich */
}

/* Stil der Scrollleiste (nur für WebKit-basierte Browser) */
.overflow-scroll-gradient ::-webkit-scrollbar {
    width: 8px; /* Breite der Scrollleiste */
}

.overflow-scroll-gradient ::-webkit-scrollbar-track {
    border-radius: 8px; /* Abrundungsradius der Scrollleistenspur */
    box-shadow: inset 0 0 5px #8e989e; /* Schatten um die Scrollleistenspur */
}

.overflow-scroll-gradient ::-webkit-scrollbar-thumb {
    border-radius: 8px; /* Abrundungsradius des Scrollleisten-Daumens */
    box-shadow: inset 0 0 5px #7d7d7d; /* Schatten um den Scrollleisten-Daumen */
}

/* Anzeige des "to scroll" Hinweises */
.overflow-scroll-gradient__scroller::after {
    content: "\00a0\00a0\25B2to scroll"; /* Der Textinhalt des Hinweises */
    position: absolute;
    bottom: -25px; /* Positionierung oberhalb des unteren Verlaufs */
    left: 0px; /* Positionierung am linken Rand */
    font-size: 16px; /* Schriftgröße des Hinweises */
    color: #7f7f7f; /* Textfarbe des Hinweises */
    opacity: 1; /* Standardtransparenz des Hinweises */
    transition: opacity 0.3s ease-out; /* Übergangseffekt für die Transparenz */
}

/* Transparenz des Hinweises beim Schweben über dem Scrollbereich */
.overflow-scroll-gradient__scroller:hover::after {
    opacity: 0; /* Die Transparenz des Hinweises wird auf 0 gesetzt */
}

/* Ende Scroller für Textauszug */

Die Beschreibung des CSS im Scrollen-Element mit Anmerkungen zum width und dem max-width.

HTML zur ersten Vorlage:
Bitte beachten, dass die Visualisierung der Scrollbar erst in der Vorschau bzw. im Frontend der Webseite und nicht im Editor sichtbar ist.

<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">

Inhalt zum Scrollen...
</div>
</div>

• Die Einfügung einer Leerzeile nach den Scroll-Elementen gewährleistet eine ordnungsgemäße Formatierung des Textes im ersten Absatz.

Scroller individueller Breite, Höhe und zentriert:
Wenn gelegentlich die Breite und Höhe des sichtbaren Bereichs anpasst und der Scroller zentriert darstellt sein möchte, kann dies mit Classen erreicht werden:

/* - Scroller individuell - */

.scr-clear {
    clear: both;
}

.scr-width {
    width: 500px;
}

.scr-height {
    height: 250px;
}

.scr-center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

/* Ende Scroller individuell */

Die Classe scr-clear sorgt mit clear: both; dafür, dass die Scrollleiste nicht nachrutscht und ordentlich positioniert ist. Durch die Angaben width und height definieren wir den sichtbaren Bereich, und mit der Klasse scr-center können wir den Scroller zentrieren.

Im HTML werden diese Classen wie folgt angewendet:

<div class="overflow-scroll-gradient scr-clear scr-center scr-width">
<div class="overflow-scroll-gradient__scroller scr-height">

Scrolle-Elements mit Schaltfläche

Hier die Verwendung von ::-webkit-scrollbar-button (CSS Scrollbar Selectors) demonstriert, mit dem die Schaltflächen der Scrollleiste interaktiv genutzt werden können. Dieses Beispiel eignet sich auch für Inhalte mit größerem Umfang, da die Schaltflächen eine effektive Navigation durch den Inhalt ermöglichen. Dieses Beispiel zeigt ein Scroll-Element mit begrenzter Breite, das zentriert dargestellt wird.

Bei der Erstellung des zweiten Scrolle-Elements müssen die Selektoren leicht angepasst werden. Wir benennen es als "Scrollerl" und passen entsprechend die Selektoren an.

CSS zum Scrolle-Elements mit Schaltfläche:

/* --- Scrolle-Elements mit Schaltfläche --- */

/* Container für den Scrollbereich */
.overflow-scrollerl-gradient {
    position: relative;
    margin: auto;
    margin-bottom: 45px;
    max-width: 504px;
}

/* Der Scrollbereich selbst */
.overflow-scrollerl-gradient__scroller {
    overflow-y: scroll;
    background: #fdfdfd;
    width: auto;
    height: 250px;
    padding: 10px;
    font-size: 85%;
    line-height: 1.5;
}

/* Stil der Scrollleiste (nur für WebKit-basierte Browser) */
.overflow-scrollerl-gradient ::-webkit-scrollbar {
    width: 4px;
}

.overflow-scrollerl-gradient ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px #8e989e;
    border-radius: 4px;
}

.overflow-scrollerl-gradient ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 6px #7d7d7d;
}

/* Scrollbar-Schaltflächen */
.overflow-scrollerl-gradient ::-webkit-scrollbar-button {
    background-color: #6393f1; /* Hintergrundfarbe der Schaltfläche */
    height: 20px; /* Höhe der Schaltfläche */

    width: 20px; /* Breite der Schaltfläche */
    border-radius: 5px;
    display: block; /* Blockelement, um Höhe und Breite anzuwenden */
}

/* Stil für das Drücken der Scrollbar-Schaltfläche */
.overflow-scrollerl-gradient ::-webkit-scrollbar-button:active {
    background-color: #4fc151; /* Hintergrundfarbe beim Drücken */
}

/* Anzeige des "to scroll" Hinweises */
.overflow-scrollerl-gradient__scroller::after {
    content: "\00a0\00a0\25B2to scroll";
    position: absolute;
    bottom: -25px;
    left: 0px;
    font-size: 14px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Transparenz des Hinweises beim Schweben über dem Scrollbereich */
.overflow-scrollerl-gradient__scroller:hover::after {
    opacity: 0;
}

/* Ende Scrolle-Elements mit Schaltfläche */

HTML zum Scrolle-Elements mit Schaltfläche:

<div class="overflow-scrollerl-gradient">
<div class="overflow-scrollerl-gradient__scroller">

Inhalt zum Scrollen...
</div>
</div>

• Die Einfügung einer Leerzeile nach den Scroll-Elementen gewährleistet eine ordnungsgemäße Formatierung des Textes im ersten Absatz.

Darstellung der Scrollleiste

Durch den Einsatz von WebKit (::-webkit-scrollbar) wird der scrollbare Inhalt auf der Webseite sichtbar gemacht.

Zu beachten ist, dass die rechtsbündige Scrollbar in Browser "Firefox" nicht wie gewohnt ist, jedoch ist der Scrolle selbst sichtbar. Allerdings wird die Scrollbar erst in Interaktion angezeigt. Aus diesem Grund kann das Hinzufügen eines Hintergrundverlaufs mit linear-gradient auch Vorteile bringen, da der zu scrollende Inhalt dadurch besser erkennbar ist. Siehe dazu die folgende Bilder:

Standardmäßiger-Scrollbereich

/* --- Standard-Scrollbereich --- */

/* Container für den Scrollbereich */
.scroll-container {
    position: relative;
    border: 1px solid #ccc;
    max-width: 500px;
    height: 200px;
    margin: 40px auto 40px;
    padding: 10px 0 10px 1px;
    font-size: 90%;
}

/* Der Scrollbereich selbst */
.scroll-content {
    max-width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/* Innenbereich des Scrollinhalts */
.scroll-content-inner {
    padding: 0 10px 0 10px;
}

/* Anzeige des "to scroll" Hinweises */
.scroll-container::after {
    content: "\00a0\00a0\25B2to scroll";
    position: absolute;
    bottom: -25px;
    left: 0px;
    font-size: 16px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.scroll-container:hover::after {
    opacity: 0;
}

/* Ende Standard-Scrollbereich */

<div class="scroll-container">
<div class="scroll-content">
<div class="scroll-content-inner">

Inhalt zum Scrollen...
</div>
</div>
</div>

Der „Standard-Scroller“ ähnelt dem „Interaktion-Scroller (siehe weiter unterhalb), der farbig angepasst werden kann und eine minimale Breitenanpassung ermöglicht.

Anzeige des "to scroll" Hinweises

In Fällen, in denen die Scrollbar in Firefox standardmäßig ausgeblendet ist und eine permanente Sichtbarkeit gewünscht wird, sind alternative Designelemente zu verwenden, um dem Benutzer anzuzeigen, dass ein Scrollen möglich ist. Zudem ist das für den Besucher eine zusätzliche visuelle Unterstützung.

Folgendes CSS ist bereits den obigen Codes enthalten und wird hier nur erklärt:

.overflow-scroll-gradient__scroller::after {
    content: "\00a0\00a0\25B2to scroll";
    position: absolute;
    bottom: -25px;
    left: 0px;
    font-size: 16px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.overflow-scroll-gradient__scroller:hover::after {
    opacity: 0;
}

content: '\00a0\00a0\25B2to scroll';: Diese Zeile legt den Inhalt des nachgestellten Elements fest. Hier werden Unicode-Zeichen verwendet, um Leerzeichen (\00a0 entspricht einem nicht umbrechenden Leerzeichen), gefolgt von einem aufwärts gerichteten Dreieck-Symbol (\25B2), und dann der Text "to scrolle" eingefügt. Das bedeutet, dass der Text "to scroll" zusammen mit einem aufwärts gerichteten Dreieck-Symbol am Ende des Elements angezeigt wird.

Konfiguration des Cursors

Als zusätzliches Feature können wir die Funktion zur Steuerung des Cursors basierend auf dem Scrollverhalten integrieren. Dies geschieht mittels JavaScript, wodurch der Cursor entsprechend den Scrollbewegungen des Benutzers angepasst wird.

/* --- Konfiguration des Cursors Scroller --- */

// Funktion zum Steuern des Cursors basierend auf dem Scrollverhalten
function handleScrollCursor() {
	
// Hier sind die Classen eingetragen, die das Cursor-Verhalten zeigen
  const scrollers = document.querySelectorAll('.overflow-scroll-gradient__scroller, .my-pre');

  function handleScroll() {
    const scrollTop = this.scrollTop;
    const maxScrollTop = this.scrollHeight - this.clientHeight;
    const scrollTolerance = 25; // Toleranzwert für Abweichungen beim Scrollen

    if (scrollTop <= scrollTolerance) {
      this.style.cursor = 's-resize'; // Cursor anzeigen, wenn am Anfang des Scrollbereichs
    } else if (scrollTop >= maxScrollTop - scrollTolerance) {
      this.style.cursor = 'n-resize'; // Cursor anzeigen, wenn nahe dem Ende des Scrollbereichs
    } else {
      this.style.cursor = 'ns-resize'; // Cursor einblenden, wenn der Benutzer nicht am Anfang oder Ende scrollt
    }
  }

  scrollers.forEach(scroller => {
    handleScroll.call(scroller); // Initialen Aufruf der Funktion für jedes ausgewählte Element
    scroller.addEventListener('scroll', handleScroll);

    scroller.addEventListener('mousedown', () => {
      scroller.style.cursor = 'auto'; // Cursor auf 'auto' setzen beim Klicken in das Scrollfeld
    });
  });
}

// Aufrufen der Funktion, wenn die Seite geladen wird
window.addEventListener('load', handleScrollCursor);

/* Ende Konfiguration des Cursors Scroller */

Beschreibung des JS zum Cursor für Scroller:

Interaktion Scroller – Standard Scroller

Der "Interaktion-Scroller" gemäß unserer Namensgebung bedient sich der alternativen Eigenschaften des Teils der CSS Overflow Module Level 3 und bieten eine standardisierte Möglichkeit, um das Verhalten und das Aussehen von Scrollleisten zu steuern.

Der Interaktion Scroller hat visuell keine Scrollleiste und zeigt den Daumen erst bei Interaktion an. Die Form und die individuelle Farbgebung sind in den meisten Browsern identisch. Der Standard-Scroller, wie bereits oben erwähnt, ähnelt diesem, jedoch ist das obige ohne individuelle Farbgebung und der minimalen Breiteneinstellung für den Scroll-Daumen.

• Dieses Beispiel richtet sich insbesondere an diejenigen, die ein Design bevorzugen, bei dem die Scrollleiste grundlegend ausgeblendet ist.

Für diese Variation der Scrollleiste können beispielsweise die Attribute scrollbar-color: #9FB6CD #F2F2F2; und scrollbar-width: thin; oder auto; verwendet werden. Mit width: none; kann sie vollständig deaktiviert werden. Es ist jedoch zu beachten, dass die vollständige farbliche Formatierung nicht gegeben ist. In den Browsern Chrome, Edge, Firefox und Opera wird die Scrollleiste einheitlich angezeigt, wie sie farblich gestaltet wurde. Safari ist in diesem Fall die Ausnahme und zeigt standardmäßig die Standard-Scrollleiste an.

• Anmerkung: Die Kombination dieser Attribute mit dem WebKit (:: -webkit-scrollbar) bietet keine Vorteile, da scrollbar-color und scrollbar-width die anderen Werte überschreiben würde.

CSS für "Interaktion Scroller":

/* --- "Interaction Scroller" --- */

/* Container für den Scrollbereich */
.overflow-scroll-interaction {
    position: relative;
    margin: auto;
    margin-bottom: 45px;
    max-width: 504px;
}

/* Verlauf oben im Container */
.overflow-scroll-interaction::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background: rgb(255, 255, 255);
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(185, 211, 238, 1) 95%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Verlauf unten im Container */
.overflow-scroll-interaction::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background: rgb(255, 255, 255);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(185, 211, 238, 1) 95%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Der Scrollbereich selbst zs. Scollleiste */
.overflow-scroll-interaction__scroller {
    overflow: scroll;
    background: #fff;
    width: auto;
    height: 300px;
    padding: 15px 15px;
    font-size: 90%;
    scrollbar-color: #9fb6cd #f2f2f2;
    scrollbar-width: thin;
}

/* "to scroll" */
.overflow-scroll-interaction__scroller::after {
    content: "\00a0\00a0\25B2to scroll";
    position: absolute;
    bottom: -25px;
    left: 0px;
    font-size: 16px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.overflow-scroll-interaction__scroller:hover::after {
    opacity: 0;
}

/* Ende "Interaktion Scroller" */

HTML: Die Auszeichnung für "Interaktion Scroller":

<div class="overflow-scroll-interaktion">
<div class="overflow-scroll-interaktion__scroller">

Inhalt zum Scrollen...
</div>
</div>

• Die Einfügung einer Leerzeile nach den Scroll-Elementen gewährleistet eine ordnungsgemäße Formatierung des Textes im ersten Absatz.

"Interaktion Scroller" im Dienst:

Der "Interaktion-Scroller" hat visuell keine Scrollleiste und zeigt den Daumen erst bei Interaktion an. Die Form und die individuelle Farbgebung sind in den meisten Browsern identisch.

pre-Tag im Scrolle

Dem <pre>-Tag wird ein Scrollbereich hinzugefügt. Dies ist besonders nützlich für längere Codeabschnitte, die in kompakter Form präsentiert werden sollen. Durch die Hinzufügung des Scrollebereichs wird die Website übersichtlicher und wirkt dadurch konformer. Das folgende basiert auf Web-Kit-Scrolle.

CSS für pre-Tag im Scrolle:

/* --- pre-Tag + Scrolle ---  */
#content pre {
    font-size: 80%;
    margin-bottom: 45px;
}

pre.my-pre {
    overflow-x: auto;
    height: 400px;
}

/* Scrollleiste */
pre.my-pre::-webkit-scrollbar {
    width: 5px; /* Breite Scrollleiste vert. */
}

pre.my-pre::-webkit-scrollbar {
    height: 5px; /* Breite bzw. Höhe der Scrollleiste horiz. */
}

.my-pre::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 6px #8e989e;
border-radius: 3px;*/
    border-radius: 6px;
    box-shadow: inset 0 0 2px #8e989e;
}

.my-pre::-webkit-scrollbar-thumb {
    /*border-radius: 2px;
box-shadow: inset 0 0 6px #7D7D7D;*/
    border-radius: 6px;
    box-shadow: inset 0 0 4px #7d7d7d;
}

.my-pre::-webkit-scrollbar-corner {
    background: #cd5606 /*#ABB1B4*/;
}

/* --- "to scroll" pre-Tag --- */
pre.my-pre::after {
    content: "\00a0\25B2to scroll";
    font-family: sans-serif;
    position: absolute;
    bottom: -25px;
    left: 0;
    font-size: 16px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

pre.my-pre:hover::after {
    opacity: 0;
}
/* - Ende "to scroll" pre-Tag - */

HTML für pre-Tag im Scrolle:

<pre class="my-pre">Code</pre>

Anmerkung: Hier der Website ist das im Zusammenspiel mit PRISM:

<pre class=my-pre><code class="language-html">Text Text Text</code></pre>

"to scroll" nach pre-Tag mit PRISM und Zeilennummerierung

Wenn jedoch die Zeilennummerierung im Zusammenspiel mit PRISM berücksichtigt werden sollte, ist dies anders zu implementieren.
In der standardmäßigen Struktur ohne Zeilennummerierung wäre der Hinweis direkt neben dem <pre>-Tag unproblematisch. Mit aktivierter Zeilennummerierung wird jedoch diese einfache Positionierung durch PRISM-Styles und zusätzliche DOM-Elemente komplizierter, und der Hover-Effekt des „to scroll“-Hinweises kann dabei gestört werden.

<pre class=my-pre><code class="language-html line-numbers">Text Text Text</code></pre>

Das Problem tritt auf, weil PRISM bei aktivierter Zeilennummerierung zusätzliche HTML-Strukturen generiert, die die Darstellung und Positionierung des „to scroll“-Hinweises beeinflussen können. PRISM fügt beispielsweise eigene Wrapper und Abstände um den Code ein, um die Zeilennummern korrekt darzustellen, wodurch die Position von Elementen, die direkt nach dem <pre>-Block platziert werden, unvorhersehbar wird.

Um das korrekt zu implementieren, muss der Hinweis daher als eigenständiges <div>-Element angelegt und über JavaScript kontrolliert werden, anstatt sich auf das CSS-::after-Pseudoelement zu verlassen. Diese Lösung sichert die korrekte Position und Sichtbarkeit des „to scroll“-Hinweises unabhängig von PRISM’s DOM-Anpassungen und funktioniert stabil, ohne durch die Zeilennummerierung beeinträchtigt zu werden.

Mit diesem JS und Anpassung des CSS.

/* --- "to scroll" Hinweis: im pre-Tag PRISM mit Zeilennummerierung --- */
document.querySelectorAll('.my-pre, .my-pre-kurz').forEach(function(preElement) {
    // Erstellen des "to scroll"-Hinweises als div-Element
    const scrollHinweis = document.createElement('div');
    scrollHinweis.className = 'scroll-hinweis';
    scrollHinweis.textContent = '▲ to scroll';

    // Platzieren des Hinweises direkt nach dem <pre>-Element
    preElement.parentNode.insertBefore(scrollHinweis, preElement.nextSibling);
    
    // Event-Listener zum Aus- und Einblenden des Hinweises bei Hover
    preElement.addEventListener('mouseenter', function() {
        scrollHinweis.style.opacity = '0'; // Hinweis bei Hover ausblenden
    });

    preElement.addEventListener('mouseleave', function() {
        scrollHinweis.style.opacity = '1'; // Hinweis wieder einblenden
    });
});
/* - Ende "to scroll" Hinweis: im pre-Tag - */

• Zielauswahl: Der Code selektiert alle <pre>-Elemente mit den Klassen .my-pre.
• Erstellung des Scroll-Hinweises: Ein neues div-Element wird erzeugt, mit der Klasse scroll-hinweis versehen und der Text "▲ to scroll" hinzugefügt.
• Einfügen des Hinweises: Der Hinweis wird unmittelbar nach dem jeweiligen <pre>-Element eingefügt.
• Hover-Effekt: Der Hinweis blendet sich aus, wenn der Benutzer über das <pre>-Element fährt (mouseenter) und erscheint wieder beim Verlassen (mouseleave).

Der Teil des CSS von '/* — "to scroll" pre-Tag — */' wurde mit folgendem ersetzt:

/* --- Anzeige des "to scroll" Hinweises bei my-pre (PRISM Zeilennummerierung) --- */

.scroll-hinweis {
	margin: -45px 0 25px;
    font-size: 16px;
    color: #888888;
    opacity: 1;
    transition: opacity 0.3s ease-out; 
}

/* - Ende Anzeige des "to scroll" Hinweises bei my-pre (PRISM Zeilennummerierung) - */

Gimmick von CSS und Animation

… auch in Arbeit :-), nein das ist fertich.
Springende Scrollanimation federleicht und witzig halt.

Das Scrollverhalten zeigt den’springenden' Effekt erst ab einer gewissen Geschwindigkeit. Dies könnte auch dezent eingesetzt werden, um die Besucher zu überraschen und zu beeindrucken.

Anmerkung: Bei Animationen mit JavaScript und den @keyframes ist es so, dass hier die beiden Animationen im Browser Chrome, Edge und Opera wie gewünscht dargestellt wird. Firefox ignoriert die unterere Animation und Safari zeigt keine Animation an.

Das Ausprobieren von Anpassungen an den @keyframes könnte eine Lösung sein, aber der Erfolg ist fraglich. Also hier sollte die Scrollleiste jeweils mit Anstoß oben und unten etwas federn, wobei hier const isFastScroll = scrollSpeed > 0.3; // Ändere den Schwellenwert nach Bedarf eingestellt ist.

Wenn solche Gimmick deines Browsers nicht funktionieren, ist das kein Grund, seinen bevorzugten Browser aufzugeben

Das Gimmick mit Animation wird durch das Zusammenspiel von JavaScript und CSS erstellt. Hier ist zunächst das CSS:

/* --- CSS "Springenden Scrolle" ---  */

/* Container für den Scrollbereich */
.overflow-scrollfederung-gradient {
    position: relative;
    margin-bottom: 45px;
    border: 1px solid #e8e5e4;
    border-radius: 3px;
    padding: 25px 5px 25px 0px;
}

/* Verlauf oben im Container */
.overflow-scrollfederung-gradient::before {
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 45px;
    background: linear-gradient(rgb(245, 242, 240), rgba(245, 242, 240, 0.001));
    z-index: 1;
}

/* Verlauf unten im Container */
.overflow-scrollfederung-gradient::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 45px;
    background: linear-gradient(rgba(245, 242, 240, 0.001), rgb(245, 242, 240));
    z-index: 1;
}

/* Der Scrollbereich selbst */
.overflow-scrollfederung-gradient__scroller {
    overflow-y: scroll;
    background: #fdfdfd;
    width: auto;
    height: 400px;
    padding: 15px 15px;
    font-size: 95%;
}

/* Stil der Scrollleiste (nur für WebKit-basierte Browser) */
.overflow-scrollfederung-gradient ::-webkit-scrollbar {
    width: 8px;
}

.overflow-scrollfederung-gradient ::-webkit-scrollbar-track {
    border-radius: 8px;
    /*box-shadow: inset 0 0 5px #8e989e;*/
    background: blue;
}

.overflow-scrollfederung-gradient ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    /*box-shadow: inset 0 0 5px #7d7d7d;*/
    background: red;
}

/* Scroll-Animationen */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-75px) rotate(-5deg);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bounce-up {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(75px);
    }
    100% {
        transform: translateY(0);
    }
}

.overflow-scrollfederung-gradient__scroller.is-at-top {
    animation: bounce 0.5s ease-in-out;
}

.overflow-scrollfederung-gradient__scroller.is-at-bottom {
    animation: bounce-up 0.5s ease-in-out;
}

/* Anzeige des "to scroll" Hinweises */
.overflow-scrollfederung-gradient__scroller::after {
    content: "\00a0\00a0\25B2to scroll";
    position: absolute;
    bottom: -25px;
    left: 0px;
    font-size: 16px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
    z-index: 10;
}

.overflow-scrollfederung-gradient__scroller:hover::after {
    opacity: 0;
}

/* Ende "Springenden Scrolle"  */

Anmerkung: Wenn die Animation, insbesondere diejenige, die unten mit bounce-up angewendet wird, nicht so reibungslos funktioniert, sollte man sich mit den Padding-Einstellungen befassen. Das betrifft das Padding für links und rechts im 'Container für den Scrollbereich' (overflow-scrollfederung-gradient) sowie im 'Scrollbereich selbst' (overflow-scrollfederung-gradient__scroller).

Diese Anpassungen sind hier wichtig, um das unterschiedliche Verhalten im Normal- und Lesemodus sowie im Hell- und Dunkelmodus auszugleichen. Daher war hierfür den Lesemodus ein kleines CSS zu erstellen, um dieses Problem zu beheben:

[nighteyeplgn="active"] .readermode .overflow-scrollfederung-gradient__scroller {
    padding: 15px 40px;
}

JavaScript von Gimmick mit Animation:

/* --- Animation "Springende Scrolle" --- */

// Überprüfen, ob der Scroller auf der Seite vorhanden ist
if (document.querySelector('.overflow-scrollfederung-gradient__scroller')) {
    // Selektiere das Element, auf das die Scrollleiste angewendet wird
    const scroller = document.querySelector('.overflow-scrollfederung-gradient__scroller');

    // Variable für die letzte Scrollposition
    let lastScrollTop = 0;
    // Variable für die Zeit, die zwischen zwei Scrollereignissen vergangen ist
    let lastScrollTime = Date.now();

    // Füge einen Event-Listener hinzu, um das Scrollen zu überwachen
    scroller.addEventListener('scroll', function() {
        // Berechne die aktuelle Scrollposition und die Scrollgeschwindigkeit
        const currentScrollTop = scroller.scrollTop;
        const currentTime = Date.now();
        const scrollSpeed = Math.abs(currentScrollTop - lastScrollTop) / (currentTime - lastScrollTime);

        // Überprüfe, ob die Scrollgeschwindigkeit über einem bestimmten Schwellenwert liegt
        const isFastScroll = scrollSpeed > 0.3; // Ändere den Schwellenwert nach Bedarf

        // Überprüfe, ob die Scrollposition am unteren Ende des Inhalts ist und ob schnell gescrollt wurde
        const isAtBottom = currentScrollTop + scroller.clientHeight >= scroller.scrollHeight && isFastScroll;

        // Überprüfe, ob die Scrollposition am oberen Ende des Inhalts ist und ob schnell gescrollt wurde
        const isAtTop = currentScrollTop === 0 && isFastScroll;

        // Füge oder entferne die entsprechenden Klassen basierend auf der Scrollposition
        if (isAtBottom) {
            scroller.classList.add('is-at-bottom');
        } else {
            scroller.classList.remove('is-at-bottom');
        }

        // Hier ändern wir die Bedingung für das Scrollen nach oben
        if (isAtTop && !isAtBottom) {
            scroller.classList.add('is-at-top');
        } else {
            scroller.classList.remove('is-at-top');
        }

        // Aktualisiere die letzten Scrollwerte für die nächste Überprüfung
        lastScrollTop = currentScrollTop;
        lastScrollTime = currentTime;
    });
}

Schlussendlich:

<div class="overflow-scrollfederung-gradient"
<div class="overflow-scrollfederung-gradient__scroller">

Inhalt zum Scrollen...
</div>
</div>

• Die Einfügung einer Leerzeile nach den Scroll-Elementen gewährleistet eine ordnungsgemäße Formatierung des Textes im ersten Absatz.

Stell dir vor, die Welt des Internets ohne Scrollen – Bildschirme, die bis in die Wipfel reichen und eine Leiter dazu! Also lasst uns weiter scrollen und das Internet mit Leichtigkeit durchscrollen.

Scroller in Synergie mit Dunkel-Modus

Durch den Dunkel-Modus können sich zur Konformität so Änderungen des CSS ergeben. Hier sind bspw. so Anpassungen:

/* Dunkelmodus var. - Night Eye */
[nighteyeplgn="active"] .overflow-scroll-gradient::before {
    background: linear-gradient(#647373, rgba(255, 255, 255, 0.001));
}

[nighteyeplgn="active"] .overflow-scroll-gradient::after {
    background: linear-gradient(rgba(255, 255, 255, 0.001), #647373);
}

[nighteyeplgn="active"] .overflow-scroll-gradient ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #142733;
    border-radius: 3px;
}

[nighteyeplgn="active"] .overflow-scroll-gradient ::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 6px #8e989e;
}

• Anderem Nacht-Mode-Plugi-in bspw; die Änderung ist in Blau

/* Scrollleiste */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* Scrollleiste */ 
::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #8e989e;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px #7D7D7D;
}

Schlussbetrachtung: Vergleich zwischen Standard- und WebKit-basierter Scrollleiste

Die CSS-Eigenschaften ::-webkit-scrollbar, die spezifisch für WebKit-basierte Browser wie Chrome, Edge, Safari und Opera sind, wurden ursprünglich eingeführt, um die Gestaltung von Scrollleisten anzupassen. Sie bieten Möglichkeiten, um beispielsweise die Größe, Farbe und das Aussehen der Scrollleisten zu ändern.

Allerdings sind die ::-webkit-scrollbar-Pseudo-Elemente nicht Teil des offiziellen CSS-Standards und werden möglicherweise nicht von allen Browsern unterstützt.

Die Alternative dazu ist die Verwendung der standardisierten CSS-Eigenschaften für Scrollleisten, wie z.B. scrollbar-width, scrollbar-color, overflow und overflow-x mit den Werten auto oder scroll. Diese Eigenschaften sind Teil des CSS Overflow Module Level 3 und bieten eine standardisierte Möglichkeit, um das Verhalten und das Aussehen von Scrollleisten zu steuern.

Hier ist ein Beispiel für die Verwendung der modernen Scrollleisten-Styling-Eigenschaften:

/* --- WebKit basierte Scrolleiste --- */

/* Standard-Scrollleistenbreite */
::-webkit-scrollbar {
    width: 12px;
}

/* Farbe des Scrollleisten-Schienen */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Farbe des Scrollleisten-Daumens */
::-webkit-scrollbar-thumb {
    background-color: #888;
}

/* Eckenradius des Scrollleisten-Daumens */
::-webkit-scrollbar-corner {
    background: #abb1b4;
}

/* Die Farbe des Scollleisten-Daumens bei Hover ändern */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Ende WebKit basierte Scrolleiste */

/* -- Standard Scrollleiste -- */
.overflow-scroll-gradient__scroller {
    scrollbar-width: thin; /* dünnere Scrollleiste */
    scrollbar-color: #888 #f1f1f1; /* Farbe des Daumens und der Schiene */
}

Durch die Verwendung standardisierter CSS-Eigenschaften wird eine weitgehende Browserkompatibilität gewährleistet. Im Gegensatz dazu ermöglicht die WebKit-basierte Variante eine individuellere Gestaltung, wobei die gängigsten Browser unterstützt werden und keine nachteiligen Auswirkungen auf die grundlegende Darstellung in Browsern auftreten, die die WebKit-basierte Variante nicht unterstützen.

• CSS/Eigenschaften/scrollbar (selfhtml)

• Anleitung – Benutzerdefinierte Bildlaufleiste (W³ schools)
• Ab scroll-behavior (M mdn_) gibt es mehr zu entdecken.

Abschließend möchten wir erwähnen, dass die Alternative zur Standard-Scrollleiste bis zu einem gewissen Grad eine einfachere Handhabung bietet. Die Verwendung der WebKit-basierten Scrollleiste ermöglicht es jedem Benutzer, die für ihn passende Option zu wählen und seine persönlichen Präferenzen zu berücksichtigen. Letztendlich ist es die Entscheidung, welche Optionen am besten zu den Anforderungen und den eigenen Wünschen passt.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 September