<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.