querySelector 事件监听器`scroll`答案

【问题标题】：querySelector event listener `scroll`querySelector 事件监听器`scroll`
【发布时间】：2018-09-17 04:29:27
【问题描述】：

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

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

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

&lt;div class="test-scroll"&gt;&amp;nbsp;&lt;/div&gt;

【问题讨论】：

滚动条不在 DIV 中，它在主页中。如果 DIV 的内容太大而无法容纳，您只会在 DIV 中看到一个滚动条，但您只有一行内容。

标签： javascript html dom scroll dom-events

【解决方案1】：

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

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

堆栈sn-p

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>

【讨论】：