Text scrollen ist Struktur!
– zum Postieren von Inhalt

Das mit Text scrollen so ‚Overflow scroll gradient‘, weil dem Leser eine Struktur des Contents sehr von Vorteil ist. In erster Linie, wenn die Artikel etwas größer und so Nebeninfos sind. Ob bietet sich das schon dem Titel HTML des aus- und einklappen von Text. Weiter ist nun das hier mit den überdeckt scrollbaren Inhalt.

Overflow scroll gradient

Das Feature ‚Scroller‘ führt zu einem WebKit, welches Textinhalts im Overflow scroll gradient ist. Weiter fügt es hier dem Element einen ‚Überblendungsgradienten‘ (Scrollleiste sichtbar) hinzu, um anzuzeigen, dass mehr Inhalt gescrollt werden kann.

  • So folgend CodePen. overflow-scroll-gradient.
  • Zum responsiv dann für before + after mit width:100%;. Denn die höchste verfügbare Breite passt auf jedem Bildschirm und ist so auch am Handy passend.
  • Weiter für .overflow-scroll-gradient__scroller ist das mit width: auto; konform, denn das setzt sich auf die niedrigste verfügbare Breite.

Das CSS

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

Zum Bspw die Erläuterung im Scroller

Siehe auch CSS :: Overflow scroll gradient

Scroller für Textauszug
  1. position: relative zum Elternelement erstellt einen kartesischen Positionierungskontext für Pseudoelemente.
  2. margin ist der Aussenabstand für oben und unten.
  3. ::before und ::after definiert ein Pseudo-Element.
  4. background-image: linear-gradient(...) fügt einen linearen Farbverlauf hinzu, der von Transparent zu Weiß übergeht (von oben nach unten vs).
  5. position: absolute nimmt das Pseudoelement aus dem Fluss des Dokuments heraus und positioniert es in Bezug auf das übergeordnete Element.
  6. width entspricht der Größe des Bildlaufelements (das ein untergeordnetes Element des übergeordneten Elements mit dem Pseudoelement ist).
  7. height bei before und after ist die Höhe des Fading-Gradienten-Pseudo-Elements, das relativ klein gehalten werden sollte. Weiter bei ...__scroller ist height die sichtbare Höhe des zu scrollenden Contents.
  8. top und bottom positioniert das Pseudo-Element jeweilig 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.
Scrollleiste sichtbar

Das ist für die Scrollleiste vorab zur Sichtbarkeit und zeigt so zu scrollenden Inhalt. Die Scrollbar würde sonst erst ab scroll sichtbar. Des Letztren mit der Scrollleiste rechts, das ist Browser Firefox nicht funktionell. Mithin ist so auch das background: linear-gradient von Vorteil, da der zu scrollende Inhalt sich etwas abhebt.

Browser Firefox siehe Symbolbild ↓
Scrollen. Scrollbar-firefox
Symbolbild zum scrolle in Browser Firefox. Die Scrollleiste rechts ist dort nicht.
Browser Chrome und Safari siehe Symbolbild ↓
Srollen, Scrollbar-wie_gehabt
… und zum scrolle in Browser Chrome und Safari. Siehe im Bild die Scrollleiste.

Das HTML zum scrolle

<div class="overflow-scroll-gradient">
 <div class="overflow-scroll-gradient__scroller">
 Content to be scrolled
 </div>
</div>

Das ist dann im Frontend visuell, also nicht im Editor.

Bspw der zweiten Scrollbar von CSS variiert

  • 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. Das 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">

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 nun 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;
}

Info echo