Beispiel:Scroll-Snap-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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 - 1</title> <style> .gallery { width: 90%; 

   display: flex;
   margin: 2em auto;
   padding: 0 1em;

list-style-type: none; 

   background: skyblue;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scrollbar-color: steelblue gold;
   scrollbar-width: auto;

img { 

   margin: 1em;

padding: 1em; border-radius:0.5em; width: 30em; aspect-ratio: 4/3; 

   scroll-snap-align: center;

} } 

   ::-webkit-scrollbar { width: 14px;}
   ::-webkit-scrollbar-thumb { background-color: steelblue; border-radius: 14px; border: 3px solid gold;}
   ::-webkit-scrollbar-track { background: gold;}

</style> </head>

<body>

Bilder-Galerie mit scroll-snap ohne JS

  • <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/b/bb/Landscape-3.svg" alt="Abendstimmung am See">
  • <img src="https://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">

</body> </html>

Abgerufen am 12.11.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Scroll-Snap-1.html"