prof3ssorSt3v3/scroll-snap.html

## scroll-snap.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS Scroll Snap properties</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 20px;
        line-height: 1.7;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
      body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      main {
        height: 400px;
        width: 400px;

        overflow-y: scroll;
        scroll-snap-type: y mandatory;

        /* scroll-snap-stop: always;
        This third property is very much like manatory vs proximity
        doesn't work in IE, Edge, Firefox, or Safari */
      }
      section {
        height: 400px;
        width: 400px;
        border: 1px solid #ccc;
        padding: 2rem;
        font-size: 1.4rem;
        font-weight: 100;
        background-color: hsl(220, 50%, 40%);
        color: hsl(220, 50%, 90%);

        scroll-snap-align: start;
      }
      section:nth-of-type(2n) {
        background-color: hsl(270, 50%, 40%);
        color: hsl(270, 50%, 90%);
      }
      section:nth-of-type(3n) {
        background-color: hsl(120, 50%, 40%);
        color: hsl(120, 50%, 90%);
      }
      code {
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        There are two <code>scroll-snap-*</code> properties. One goes on the
        parent element and one goes on the child element.
      </section>
      <section>
        <code>scroll-snap-type</code> goes on the parent and takes two values.
        The first can be: <code>x, y, block, inline, none, or both</code>.
      </section>
      <section>The second is <code>mandatory or proximity</code>.</section>
      <section>
        <code>scroll-snap-align</code> goes on the child takes one or two
        values: <code>none, start, center, or end</code>. The first is for the
        block direction, second is for the inline direction.
      </section>
    </main>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>CSS Scroll Snap properties</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}
	body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	main {
	height: 400px;
	width: 400px;

	overflow-y: scroll;
	scroll-snap-type: y mandatory;

	/* scroll-snap-stop: always;
	This third property is very much like manatory vs proximity
	doesn't work in IE, Edge, Firefox, or Safari */
	}
	section {
	height: 400px;
	width: 400px;
	border: 1px solid #ccc;
	padding: 2rem;
	font-size: 1.4rem;
	font-weight: 100;
	background-color: hsl(220, 50%, 40%);
	color: hsl(220, 50%, 90%);

	scroll-snap-align: start;
	}
	section:nth-of-type(2n) {
	background-color: hsl(270, 50%, 40%);
	color: hsl(270, 50%, 90%);
	}
	section:nth-of-type(3n) {
	background-color: hsl(120, 50%, 40%);
	color: hsl(120, 50%, 90%);
	}
	code {
	font-weight: 500;
	}
	</style>
	</head>
	<body>
	<main>
	<section>
	There are two <code>scroll-snap-*</code> properties. One goes on the
	parent element and one goes on the child element.
	</section>
	<section>
	<code>scroll-snap-type</code> goes on the parent and takes two values.
	The first can be: <code>x, y, block, inline, none, or both</code>.
	</section>
	<section>The second is <code>mandatory or proximity</code>.</section>
	<section>
	<code>scroll-snap-align</code> goes on the child takes one or two
	values: <code>none, start, center, or end</code>. The first is for the
	block direction, second is for the inline direction.
	</section>
	</main>
	</body>
	</html>