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>
<h1>Bilder-Galerie mit <code>scroll-button()</code></h1>
<ul class="gallery">
<li><img src="//wiki.selfhtml.org/images/4/4b/Landscape-1.svg" alt="Landschaft in der Toskana"></li>
<li><img src="//wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="Gebirge - Tagsüber"></li>
<li><img src="//wiki.selfhtml.org/images/6/6e/Landscape-2-night.svg" alt="Gebirge - nachts bei Mondschein"></li>
<li><img src="//wiki.selfhtml.org/images/b/bb/Landscape-3.svg" alt="Abendstimmung am See"></li>
<li><img src="https://wiki.selfhtml.org/images/b/b8/Landscape-3-dawn.svg" alt="Morgenstimmung bei Tagesanbruch">
<li><img src="//wiki.selfhtml.org/images/b/b9/Seascape.svg" alt="Unterwasser-Landschaft"></li>
</ul>
</body>
</html>
