Beispiel:Scroll-Snap-2.html
Aus SELFHTML-Wiki
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./Beispiel:Grundlayout.css"> <title>Bilder-Galerie - 2</title> <style> .gallery { --button-base-color: gold; --button-accent1-color: skyblue; --button-accent2-color: steelblue; --button-accent3-color: navy; width: 90%;
display: flex; margin: 2em auto; padding: 0 1em;
list-style-type: none;
background: steelblue;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-color: var(--button-accent2-color) var(--button-base-color);
scrollbar-width: auto;
::-webkit-scrollbar { width: .5em; }
::-webkit-scrollbar-thumb { background-color: var(--button-accent1-color); border-radius: .25em; }
::-webkit-scrollbar-track { background: var(--button-base-color); }
img {
margin: 1em;
padding: 1em; border-radius:0.5em; width: 30em; aspect-ratio: 4/3;
scroll-snap-align: center;
} } @supports selector(::scroll-marker) {
.gallery {
anchor-name: --gallery;
scroll-marker-group: after;
&::scroll-button(*) {
position-anchor: --gallery;
position: fixed;
align-self: anchor-center;
aspect-ratio: 1;
font-size:1.5em;
background: var(--button-base-color);
border: thin solid var(--button-accent1-color);
border-radius: 50%;
}
&::scroll-button(*):hover {
background: var(--button-accent2-color);
border-color: var(--button-accent3-color);
}
&::scroll-button(left) {
content: "⬅︎";
left: calc(anchor(left) + 1em);
}
&::scroll-button(right) {
content: "⮕";
right: calc(anchor(right) + 1em);
}
</style> </head>
<body>
Bilder-Galerie mit scroll-button()
- <img src="//wiki.selfhtml.org/images/4/4b/Landscape-1.svg" alt="Landschaft in der Toskana">
- <img src="//wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="Gebirge - Tagsüber">
- <img src="//wiki.selfhtml.org/images/6/6e/Landscape-2-night.svg" alt="Gebirge - nachts bei Mondschein">
- <img src="//wiki.selfhtml.org/images/2/2c/Landscape-3-foggy.svg" alt="Abendstimmung am See mit Nebel">
- <img src="//wiki.selfhtml.org/images/b/b8/Landscape-3-dawn.svg" alt="Morgenstimmung bei Tagesanbruch">
- <img src="//wiki.selfhtml.org/images/b/b9/Seascape.svg" alt="Unterwasser-Landschaft">
- <img src="//wiki.selfhtml.org/images/9/93/Landscape-4.svg" alt="Karawane in der Wüste">
- <img src="//wiki.selfhtml.org/images/3/3a/Landscape-5.svg" alt="Fischer im Abendrot">
</body> </html>
