How to get the scroll amount if a div has the scroll

user_14229661 0
Viewed 429

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>

css html javascript
3 Answers

parent.scrollTop is what you need.

user_9165380

You can just use scrollHeight if you want to know the elements scroll length. If you mean to see how far an element has been scrolled, you can use scrollTop.

Like this:

const scrollable = document.querySelector('.scrollable')

// This should print 500, which is the same height as the child div
// "content".
console.log(scrollable.scrollHeight)

scrollable.addEventListener("scroll", e => {
  // This shows how far down in the element we've scrolled.
  console.log(scrollable.scrollTop)
})
.scrollable {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

.content {
  width: 100%;
  height: 500px;
  background-color: lightblue;
}
<div class="scrollable">
  <div class="content"></div>
</div>

user_118579060

This works,check this out.

const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");

parent.addEventListener("scroll", () => {
  console.log(parent.scrollTop); //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>

user_125158560
Related