Menu
So the page doesn't have scroll property. A div has elements inside it with the scroll property.
I m looking for a pageYOffset equivalent for a div to know its scrolled length.
const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");
parent.addEventListener("scroll", () => {
console.log(pageYOffset); //I need to change this
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
overflow: hidden;
}
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.childern {
height: 100vh;
scroll-snap-align: start;
}
.one {
background-color: black;
}
.two {
background-color: rgb(36, 36, 36);
}
.three {
background-color: rgb(71, 71, 71);
}<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="childern one"></div>
<div class="childern two"></div>
<div class="childern three"></div>
</div>
</body>
<script src="app.js"></script>
</html>
912
asked Nov 23 '25 11:11
parent.scrollTop is what you need.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
