kristofer84/page-scroll.html

## page-scroll.html
<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Work+Sans:wght@400;500&display=swap" rel="stylesheet" />
    <style>
      :root {
        font-size: 14px;
        font-family: "Work Sans", sans-serif;
      }

      body {
        margin: 0;
      }

      #counter {
        position: fixed;
        top: 0;
        left: 0;
        width: 100px;
        height: 30px;
        border-right: 0.5px solid gray;
        border-bottom: 0.5px solid gray;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #container {
        height: 100%;
        position: fixed;
        width: 100%;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        /* outline: 0.5px solid black; */
      }

      #container > div {
        height: 100%;
        scroll-snap-align: center;
        text-align: center;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const container = document.getElementById("container");
        const counter = document.getElementById("counter");

        container.addEventListener("scroll", () => {
          for (const el of container.children) {
            const top = el.getBoundingClientRect().top;
            if (Math.abs(top) < 10) {
              const page = el.dataset.page;
              counter.firstElementChild.innerText = page;
              const url = location.href.replace(location.hash, "") + "#" + el.id;
              history.pushState({}, "", url);
              break;
            }
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="counter">Page&nbsp;<span>1</span>&nbsp;of 5</div>
    <div id="container">
      <div id="section-1" data-page="1">1st</div>
      <div id="section-2" data-page="2">2nd</div>
      <div id="section-3" data-page="3">3rd</div>
      <div id="section-4" data-page="4">4th</div>
      <div id="section-5" data-page="5">5th</div>
    </div>
  </body>
</html>
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Work+Sans:wght@400;500&display=swap" rel="stylesheet" />
	<style>
	:root {
	font-size: 14px;
	font-family: "Work Sans", sans-serif;
	}

	body {
	margin: 0;
	}

	#counter {
	position: fixed;
	top: 0;
	left: 0;
	width: 100px;
	height: 30px;
	border-right: 0.5px solid gray;
	border-bottom: 0.5px solid gray;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	#container {
	height: 100%;
	position: fixed;
	width: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	/* outline: 0.5px solid black; */
	}

	#container > div {
	height: 100%;
	scroll-snap-align: center;
	text-align: center;
	}
	</style>
	<script>
	document.addEventListener("DOMContentLoaded", function () {
	const container = document.getElementById("container");
	const counter = document.getElementById("counter");

	container.addEventListener("scroll", () => {
	for (const el of container.children) {
	const top = el.getBoundingClientRect().top;
	if (Math.abs(top) < 10) {
	const page = el.dataset.page;
	counter.firstElementChild.innerText = page;
	const url = location.href.replace(location.hash, "") + "#" + el.id;
	history.pushState({}, "", url);
	break;
	}
	}
	});
	});
	</script>
	</head>
	<body>
	<div id="counter">Page <span>1</span> of 5</div>
	<div id="container">
	<div id="section-1" data-page="1">1st</div>
	<div id="section-2" data-page="2">2nd</div>
	<div id="section-3" data-page="3">3rd</div>
	<div id="section-4" data-page="4">4th</div>
	<div id="section-5" data-page="5">5th</div>
	</div>
	</body>
	</html>