Text scrollen ist Struktur!
– zum Postieren von Inhalt

Lesedauer so 4 Min.
Lernzeit ein wenig mehr 2023-April 2022-Februar like

Schreibe einen Kommentar

Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.

"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Advanced Editor Tools aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

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 Scrolling-Element ist eine weitere Möglichkeit, um überlappenden scrollbaren Inhalt zu ermöglichen. Im Folgenden finden Sie alle Informationen, die ich zum Thema zusammengetragen habe. Ich hoffe, sie sind nützlich für Sie!

Inhaltsverzeichnis

Scrolling-Element
Overflow scroll gradient

Das Scroller-Element ermöglicht es, überlappenden scrollbaren Inhalt in CSS zu erstellen. Durch das Hinzufügen des Overflow Scroll Gradient wird dem Element ein Überblendungsgradienten hinzugefügt, um anzuzeigen, dass mehr Inhalt gescrollt werden kann.

Auf GitHub finden Sie weitere Informationen zum Overflow scroll gradient, während Sie ein Beispiel zur Anwendung des Gradients im folgenden CodePen sehen können.

Um das Design responsiv zu gestalten, ist es sinnvoll, für before + after mit width: 100% zu arbeiten. Dadurch passt sich das Design auf jedem Bildschirm automatisch an und ist auch auf mobilen Geräten gut lesbar.

Für .overflow-scroll-gradient__scroller sollte width: auto verwendet werden, um sich an die verfügbare Breite anzupassen. Dadurch wird sichergestellt, dass die Scrollleiste korrekt dargestellt wird.

Das CSS zum Scrolling-Element kann individuell angepasst werden, z.B. durch Änderung der font-size, height, padding usw.

Das CSS zum Scrolling-Element

Mit Anpassung font-size, height, padding usw. individuell.

/* --- Scroller für Textauszug --- */
.overflow-scroll-gradient {
    position: relative;
    margin: 25px 0;
}

.overflow-scroll-gradient::before {
    content: "";
    position: absolute;
    top: 0px;
    max-width: 100%;
    height: 25px;
    background: linear-gradient(white, rgba(255, 255, 255, 0.001));
}

.overflow-scroll-gradient::after {
    content: "";
    position: absolute;
    bottom: 0px;
    max-width: 100%;
    height: 25px;
    background: linear-gradient(rgba(255, 255, 255, 0.001), white);
}

.overflow-scroll-gradient__scroller {
    overflow-y: scroll;
    background: white;
    width: auto;
    height: 200px;
    padding: 15px 10px;
    font-size: 15px;
}

/* 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);
}

Beschreibung des CSS im Scrolling-Element:

position: relative zum Elternelement, erstellt einen kartesischen Positionierungskontext für Pseudoelemente.
margin ist der Aussenabstand für oben und unten.
::before und ::after definiert ein Pseudoelement.
background-image: linear-gradient(...) fügt einen linearen Farbverlauf hinzu, der von Transparent zu Weiß übergeht (von oben nach unten vs.).
position: absolute nimmt das Pseudoelement aus dem Fluss des Dokuments heraus und positioniert es in Bezug auf das übergeordnete Element.
width entspricht der Größe des Bildlaufelements (das ein untergeordnetes Element des übergeordneten Elements mit dem Pseudoelement ist).
height bei before und after ist die Höhe des Fading-Gradienten-Pseudoelements, das relativ klein gehalten werden sollte. Weiter bei ...__scroller ist height die sichtbare Höhe des zu scrollenden Contents.
top und bottom positioniert das Pseudoelement jeweils am Rand des Elternelements.

Anmerkung: Die Auszeichnung …

Für .overflow-scroll-gradient::before + .overflow-scroll-gradient::after sind mit width:100%;. Denn so die höchste verfügbare Breite passt auf jedem Bildschirm.
Das .overflow-scroll-gradient__scroller ist mit width: auto; einzustellen, da so die Response auch am Handy. Denn width:auto; setzt sich auf die niedrigste verfügbare Breite.

Scroll-Leiste sichtbar

Durch den Einsatz des Überblendungsgradienten wird der scrollbare Inhalt auf der Webseite sichtbar gemacht.

Zu beachten ist, dass die rechtsbündige Scrollbar in Firefox nicht funktioniert, jedoch ist der Scroller selbst sichtbar. Allerdings wird die Scrollbar erst nach dem Scrollen des Inhalts 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 auch das Symbolbild unten.

Browser Firefox siehe Symbolbild ↓

Während in den meisten Browsern, die Scrollbar visuell dargestellt wird, ist dies in Firefox nicht der Fall. – aber das Scrollen ist gleich funktionell.

… den meisten Browsern ist die Scrollleiste visuell ↓

… und erlaubt das Scrollen in den meisten Browsern. Eine Abbildung der Scrollleiste ist im Bild rechts zu sehen.

Schriftgröße im Scroller

Das mit der Schriftgröße .overflow-scroll-gradient__scroller und font-size

Für die separate Formatierung der Schriftgröße im Scroller kann folgender Code verwendet werden:

.overflow-scroll-gradient__scroller {
	font-size: 0.9rem !important;
}

Dieser Code formatiert jedoch nur den ersten Absatz im Scroller? Um sicherzustellen, dass auch der Text in Aufzählungszeichen und weitere Absätze in der richtigen Größe angezeigt werden, kann der folgende Code verwendet werden.

Bitte beachte, dass das CSS nicht mit dem grundlegenden .overflow-scroll-gradient__scroller zusammengelegt werden kann, da es sonst zu mehreren Scrollbalken und anderen Ungereimtheiten kommen kann. Das folgende CSS muss daher separat verwendet werden:

.overflow-scroll-gradient__scroller, 
.overflow-scroll-gradient__scroller p, 
.overflow-scroll-gradient__scroller li,
.overflow-scroll-gradient__scroller strong,
.overflow-scroll-gradient__scroller b {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	color: #4A1414;
	font-size: 1.1rem !important;
}

Die Verwendung von font-family im Code ist optional und kann je nach Bedarf angepasst werden. Es gibt jedoch weitere Formatierungsoptionen, die themespezifisch anders sein können. Die hier vorgestellte Formatierung dient lediglich als Grundlage.

Das vollständige CSS für das Scrolling-Element ist weiter unten im folgenden Beispiel des Scrollers zu finden.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

CSS Beispiel im Gesamten:

/* Beispiel von Scroller */
.overflow-scroll-gradient {
  position: relative;
  margin-bottom: 35px;
}

.overflow-scroll-gradient::before {
  content: '';
  position:absolute;
    top:0px;
    width:100%;
    height:25px;
  background: linear-gradient(white, rgba(255, 255, 255, 0.001));
}

.overflow-scroll-gradient::after {
  content: '';
  position:absolute;
    bottom:0px;
    width:100%;
    height:25px;
  background: linear-gradient(rgba(255, 255, 255, 0.001), white);
}

.overflow-scroll-gradient__scroller {
    overflow-y: scroll;
    background: white;
    max-width: 100%;
    height: 400px;
    padding: 15px 10px;
}

.overflow-scroll-gradient__scroller, 
.overflow-scroll-gradient__scroller p, 
.overflow-scroll-gradient__scroller li,
.overflow-scroll-gradient__scroller strong,
.overflow-scroll-gradient__scroller b {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	color: #4A1414;
	font-size: 1.1rem !important;
}

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Das HTML zum Scrolle

Bitte beachte, 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">Zu scrollender Inhalt</div>
</div>

Anhang: Variation von CSS

Da ist nun mit .overflow-scroll-gradient2 dann height: 125px; des Scollers background + font-size anders und ohne der Codes für before und after.
Die Scrollleiste schmäler, mit separater Class sma. Schmäler geht dort dem width hervor.

… mit dabei ist hier Scrolle

/* --- Small Scroller für Textauszug --- */
.overflow-scroll-gradient2 {
    position: relative;
    margin: 25px 0;
}

.overflow-scroll-gradient2__scroller {
    overflow-y: scroll;
    background: #fdfdfd;
    font-size: 14px;
    width: auto;
    height: 125px;
    padding: 5px;
    /*line-height: 1, 2;
    text-align: center;*/
}

/* Scrollleiste mit Class 'sma' für small */
.sma::-webkit-scrollbar {
    width: 6px;
}

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

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

… und das HTML

<div class="overflow-scroll-gradient3 sma">
<div class="overflow-scroll-gradient3__scroller sma">Content to be scrolled</div>
</div>

Overflow scroll gradient in Synergie mit Dunkel-Modus Website

Durch den ⇔ Dunkel-Modus haben sich zur Konformität so Änderungen des CSS ergeben. Hier sind jetzt so Anpassungen der Scrollleiste.

Die Änderung ist in Blau

Die Änderung von …

… zu, das von box-shadow der Farbe und ohne ‘opacity’

/* 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;
}