HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>snap + scrollend</title>
  <style>
    html { scroll-snap-type: y mandatory; }
    #out {
      position: sticky; top: 0; background: #fff;
      padding: 8px; border-bottom: 1px solid #ccc;
    }
    section {
      scroll-snap-align: start;
      min-height: 100vh;
      padding: 24px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <pre id="out">(scroll to snap)</pre>
  <section id="slide-1">Slide 1</section>
  <section id="slide-2">Slide 2</section>
  <section id="slide-3">Slide 3</section>
  <script>
    var out = document.getElementById("out");
    if ("onscrollend" in document) {
      document.addEventListener("scrollend", function () {
        out.textContent = "scrollend @ Y=" + Math.round(window.scrollY);
      });
    }
    if ("onscrollsnapchange" in document) {
      document.addEventListener("scrollsnapchange", function (event) {
        var id = event.snapTargetBlock && event.snapTargetBlock.id;
        out.textContent =
          "scrollsnapchange → #" +
          id +
          " (Y=" +
          Math.round(window.scrollY) +
          ")";
      });
    } else {
      out.textContent = "scrollsnapchange not supported";
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document scrollsnapchange — with scrollend (Try It)