Text scrollen ist Struktur!
– zum Postieren von Inhalt

2022-Februar Ditmar

Info echo

Ist der Classic-Editor schon zu kennen? –

"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced

"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …

"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

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

"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

TinyMCE aktive Installationen: 2+ Millionen

"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

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 Neben-Info ist. Ob bietet sich das schon dem Titel HTML des aus- und einklappen von Text. Weiter ist nun das hier mit den überdeckt scrollbaren Inhalt.

Inhaltsverzeichnis

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

Zum Bspw die Erläuterung im Scroller

Siehe auch CSS :: Overflow scroll gradient

Scroller für Textauszug

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.

Scrollleiste sichtbar

Das ist für die Scrollleiste vorab zur Sichtbarkeit und zeigt so zu scrollenden Inhalt. Die Scrollbar würde sonst erst ab Scrolle sichtbar. Des Letzteren 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 ↓

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