querySelector事件监听器`scroll`

Question

我想了解为什么scroll元素的querySelector事件监听器在这里不起作用

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

因为没有内容强制它实际滚动任何内容。

在这里，我添加了一个更高的内部div，并使其可滚动。

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

<div class="test-scroll">

<div></div>

</div>

＆＃13;

＆＃13;

＆＃13;