CODEWITHSUNDEEP
javascripthtmldomscrolldom-events
cs1193
cs1193

Reputation: 1109

querySelector event listener `scroll`

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>

Upvotes: 0

Views: 4888

Answers (1)

Asons
Asons

Reputation: 87191

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>

Upvotes: 4

Related Questions