<div class="container">
    <section class="sec1">
      <h1>Scroll Amount</h1>
      <p>Get the scroll amount when using snap scroll.</p>
      <p>A: window.screenY</p>
      <p>B: document.body.scrollTop</p>
      <p>C: document.documentElement.scrollTop</p>
      <p class="correct">D: use getBoundingClientRect().top</p>
      <p>E: Bubbling Phase</p>
      <p class="scrollDown">Scroll Down↓</p>
    </section>
    <section class="sec2">
      <h1>Scroll Amount</h1>
      <p>Get the scroll amount when using snap scroll.</p>
      <p>A: window.screenY</p>
      <p>B: document.body.scrollTop</p>
      <p>C: document.documentElement.scrollTop</p>
      <p class="correct">D: use getBoundingClientRect().top</p>
      <p>E: Bubbling Phase</p>
      <p class="scrollDown">Scroll Down↓</p>
    </section>
    <section class="sec3">
      <h1>Scroll Amount</h1>
      <p>Get the scroll amount when using snap scroll.</p>
      <p>A: window.screenY</p>
      <p>B: document.body.scrollTop</p>
      <p>C: document.documentElement.scrollTop</p>
      <p class="correct">D: use getBoundingClientRect().top</p>
      <p>E: Bubbling Phase</p>
      <p class="scrollDown">Scroll Down↓</p>
    </section>
    <section class="sec4">
      <h1>Scroll Amount</h1>
      <p>Get the scroll amount when using snap scroll.</p>
      <p>A: window.screenY</p>
      <p>B: document.body.scrollTop</p>
      <p>C: document.documentElement.scrollTop</p>
      <p class="correct">D: use getBoundingClientRect().top</p>
      <p>E: Bubbling Phase</p>
    </section>
  </div>

  <div class="log">
    <p class="resultA">A: <span></span></p>
    <p class="resultB">B: <span></span></p>
    <p class="resultC">C: <span></span></p>
    <p class="resultD">D: <span></span></p>
    <hr>
    <p class="resultE">E: <span></span></p>
  </div>
@charset "UTF-8";


html,
body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;

  section {
    scroll-snap-align: start;
    height: 100%;
    padding: 3vw;

    h1 {
      font-size: 7vw;
      margin-top: 0;
      margin-bottom: 0.8vw;
      
      + p {
        margin-top: 0;
        margin-bottom: 4vw;
        font-size: 2.6vw;
        font-weight: bold;
      }
    }

    p {
      font-size: 1.8vw;
      width: 70%;
      
    &.scrollDown {
      width: 100%;
      text-align: center;
      font-weight: bold;
      }
      &.correct {
        font-weight: bold;
        font-size: 2.3vw;
        color: red;
      }
    }
  }

  .sec1,
  .sec3 {
    color: #fff;
    background-color: #000;
  }

  .sec2, 
  .sec4 {
    color: #000;
    background-color: #fff;
  }
}

.log {
  position: fixed;
  mix-blend-mode: difference;
  color: #fff;
  border: 1vw solid currentColor;
  padding: 2vw;
  width: 10vw;
  height: 30vw;
  top: 50%;
  transform: translateY(-50%);
  left: 80%;
  font-size: 2vw;
}

.resultD {
  font-weight: bold;
}

.scrollDown {
  animation: blink 1.5s infinite;
}

@keyframes blink {
  from {opacity: 0;}
  to {opacity: 1;}
}
View Compiled 
 //DOM　for display
  const resultA =  document.querySelector<HTMLSpanElement>('.resultA > span')
  const resultB =  document.querySelector<HTMLSpanElement>('.resultB > span')
  const resultC =  document.querySelector<HTMLSpanElement>('.resultC > span')
  const resultD =  document.querySelector<HTMLSpanElement>('.resultD > span')
  const resultE =  document.querySelector<HTMLSpanElement>('.resultE > span')

  //init
  resultA!.textContent = String(0)
  resultB!.textContent = String(0)
  resultC!.textContent = String(0)
  resultD!.textContent = String(0)
  resultE!.textContent = String(0)


  //main
  //mosttop section
  const firstChildDOM = document.querySelector<HTMLElement>('.container > *:first-child')

  //capturing phase
  window.addEventListener('scroll', () => {
    resultA!.textContent = String(window.screenY)
    resultB!.textContent = String(document.body.scrollTop)
    resultC!.textContent = String(document.documentElement.scrollTop)
    resultD!.textContent = String(Math.round(firstChildDOM!.getBoundingClientRect().top * -1))
  }, true)
  
  //bubbling phase
  window.addEventListener('scroll', () => {
    console.log('E', window.scrollY)
  }, true)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.