Immer mehr Nachrichtenseiten und Blogs verwandeln sich in ein langes Fußtuch, das lange Zeit von Artikel zu Artikel vertikal gewickelt werden muss. Um das Scrollen zu erleichtern, verstecken einige Websites einen Teil des Artikels unter dem Spoiler. Andere Websites zeigen einen Teil des Artikels im Feed an und müssen zum Lesen auf eine separate Seite wechseln.
Ich dachte, warum nicht die horizontale Linie verwenden? Browser-Entwickler haben genügend CSS-Tools bereitgestellt, um Artikel horizontal auszurichten und nahtlos zwischen ihnen zu wechseln.
Ich habe eine minimale Demo erstellt , die mit CSS funktioniert und die folgenden Eigenschaften aufweist:
- Artikel sind horizontal angeordnet.
- Ein Teil des Artikels muss nicht unter dem Spoiler versteckt sein, da das vertikale Scrollen für jeden Artikel individuell ist.
- Sie können von einer beliebigen Stelle im vorherigen Artikel zum nächsten Artikel wechseln, indem Sie mit dem Mausrad bei gedrückter Umschalttaste scrollen oder den Artikel auf dem Tablet nach links wischen.
In diesem Artikel werde ich das für ein horizontales Blog verwendete CSS aufschlüsseln.
<html>
<head>
<title>horizontal blog demo</title>
<link href="horizontal-blog.css" rel="stylesheet" media="screen">
<link href="css-min-fix.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="hb-viewport">
<div class="hb-container">
<article class="hb-page">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus...
</article>
<article class="hb-page">
<h1>Consectetur a erat nam at lectus urna duis</h1>
Consectetur a erat nam at lectus urna duis. Cursus vitae congue mauris rhoncus aenean. Quis auctor elit sed vulputate mi sit amet mauris commodo. Odio pellentesque diam volutpat commodo sed...
</article>
</div>
</div>
</body>
</html>
Analysieren Sie das CSS
horizontal-blog.css :
/*
Dies ist das Fenster, durch das der Benutzer den Inhalt des Artikels liest. Ursprünglich wurden seine Funktionen von: root element ausgeführt, aber ich entschied mich, die Struktur des HTML-Dokuments zu entfernen.
*/
.hb-viewport{
/*
Entfernen Sie die Standardeinrückung des Körpers, ohne die CSS-Stile des Körpers zu berühren.
*/
position: absolute;
top: 0;
left: 0;
/*
Stellen Sie die Größe des Ansichtsfensters auf die Größe des sichtbaren Bereichs des Fensters ein, damit horizontales Scrollen möglich ist.
*/
width: 100vw;
height: 100vh;
/*
Stellen Sie den horizontalen Bildlauf ein und blenden Sie den vertikalen aus, da jeder Artikel einzeln nach unten gescrollt werden muss.
*/
overflow-x: auto;
overflow-y: hidden;
/*
.
*/
scroll-snap-type: x mandatory;
/*
Firefox . .hb-viewport .
*/
scrollbar-width: none;
}
/*
. .hb-viewport
*/
.hb-viewport:hover{
scrollbar-width: auto;
}
/*
display: flex;
.hb-container .
*/
.hb-container{
display: flex;
}
/*
.hb-page .
*/
.hb-page{
/*
.
*/
max-height: 100vh;
/*
.
*/
overflow-y: auto;
/*
.hb-page.
*/
scroll-snap-align: center;
/*
80 100vw.
*/
min-width: min(80ch, 100vw);
padding: 0 calc((100vw - 80ch) / 2);
}
CSS
Firefox Android 68.11. css min()
. @supports
@media
.
css-min-fix.css:
/*
min.
*/
@supports not (min-width: min(80ch, 100vw)) {
/*
100vw.
*/
.hb-page{
min-width: 100vw;
}
/*
80 80 .
*/
@media screen and (min-width: 80ch) {
.hb-page{
min-width: 80ch;
}
}
}
. .