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> 

Answer 1

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>