CODEWITHSUNDEEP
javascripthtmlcss
Naman
Naman

Reputation: 382

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

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>

Upvotes: 3

Views: 5457

Answers (3)

PRATIK NAIK
PRATIK NAIK

Reputation: 537

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>

Upvotes: 0

isaacsan 123
isaacsan 123

Reputation: 1158

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>

Upvotes: 0

burakk
burakk

Reputation: 1291

parent.scrollTop is what you need.

Upvotes: 2

Related Questions