Skip to content

Instantly share code, notes, and snippets.

@DougBeney

DougBeney/Very Simple Snap Scrolling CSS Example.html

Created June 17, 2020 02:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DougBeney/310df0380144bc2f826969a1074bd349 to your computer and use it in GitHub Desktop.
Save DougBeney/310df0380144bc2f826969a1074bd349 to your computer and use it in GitHub Desktop.
Download ZIP
Very Simple Snap Scrolling CSS Example
Raw
Very Simple Snap Scrolling CSS Example.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Snap Scrolling</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html, body { margin: 0; }
.scrolly {
display: flex;
width: 100vw;
height: 100vh;
scroll-snap-type: both mandatory;
overflow: auto;
/* y axis snap scrolling */
flex-direction: column;
/* x axis snap scrolling */
/* flex-direction: row; */
}
section {
background: url("http://placekitten.com/1280/1080");
background-size: cover;
background-position: top center;
width: 100%;
height: 100%;
scroll-snap-align: start;
flex-shrink: 0;
}
section.cat2 { background-image: url("http://placekitten.com/1280/1080?blah"); }
</style>
</head>
<body>
<div class="scrolly">
<section></section>
<section class="cat2"></section>
<section></section>
<section class="cat2"></section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment