querySelector event listener `scroll`

Question

I am trying to understand why scroll event listener of querySelector element doesn't work here

document.querySelector('.test-scroll')
  .addEventListener('scroll', function() {
    alert('Scroll');
  }, false);

.test-scroll {
  height: 2000px;
  overflow-x: none;
  overflow-y: scroll;
  border: 1px solid #000;
}

<div class="test-scroll">&nbsp;</div>

The scroll bar isn't in the DIV, it's in the main page. You'll only get a scroll bar in the DIV if its contents are too big to fit, but you only have one line of content. — Barmar
– Barmar, Commented Apr 7, 2018 at 6:54

Asons · Accepted Answer · 2018-04-07 07:01:00Z

4

Because there is no content force it to actually scroll anything.

Here I added an inner div, which is higher, and make it scrollable.

Stack snippet

document.querySelector('.test-scroll')
  .addEventListener('scroll', function() {
    alert('Scroll');
  }, false);

.test-scroll {
  height: 2000px;
  overflow-x: none;
  overflow-y: scroll;
  border: 1px solid #000;
}

.test-scroll div {
  height: 3000px;
  background: red;
}

<div class="test-scroll">

<div></div>

</div>

edited Apr 7, 2018 at 7:01

answered Apr 7, 2018 at 6:54

Asons

87.7k12 gold badges119 silver badges175 bronze badges

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

Collectives™ on Stack Overflow

querySelector event listener `scroll`

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related