<h1>Click one time the bottom key to get the value</h1>
<h2>Value: 0</h2>
body {
height: 100vh;
margin: 0;
overflow: auto;
}
h1,h2 {
position: sticky;
top:0;
}
h2 {
top: 2lh;
}
body:after {
content:"";
display: block;
height: 150vh;
}
html {
overflow: hidden;
}
const scroller = document.querySelector("body");
scroller.addEventListener("scroll", (event) => {
scroller.querySelector('h2').textContent = `Value: ${scroller.scrollTop}`;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.