Using scrollTop to detect scroll

Question

I would like to log how much the user is scrolling a wrapper.

The following code does not work. I would like to know what am I doing wrong and how to fix it. Thanks!

const content = document.getElementById('content')
const wrapper = document.getElementById('wrapper').addEventListener('scroll', () => {
  console.log(content.scrollTop)
})

#wrapper {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  overflow: auto;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  background-color: orange;
  width: 50px;
  height: 500px;
}

<div id="wrapper">
  <div id="content"></div>
</div>

Wrapper is the one with the scroll not the content, so it is always going to be zero. — Abderrahmane TAHRI JOUTI
– Abderrahmane TAHRI JOUTI, Commented Dec 18, 2017 at 13:19

illiteratewriter · Accepted Answer · 2017-12-18 13:26:52Z

2

It is not content.scrollTop, but wrapper.scrollTop.

answered Dec 18, 2017 at 13:26

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AdminDev826 · Accepted Answer · 2017-12-18 13:48:46Z

To Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

scrollTop() : The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

$('#wrapper').scroll(function() {
  console.log($(this).scrollTop());
});

#wrapper {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  overflow: auto;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  background-color: orange;
  width: 50px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="content"></div>
</div>

Collectives™ on Stack Overflow

Using scrollTop to detect scroll

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related