为何querySelector选中元素的scroll事件监听器无法生效？

嘿，我来帮你揪出问题所在！你的代码里有两个关键原因导致scroll事件完全触发不了，咱们一步步拆解：

• 核心原因：元素没有可滚动的内部内容
  说白了，scroll事件触发的前提是：元素的内部内容超出了它自身的容器范围，用户滚动这个元素的内部区域时才会触发。但你给.test-scroll设置了height: 2000px，而它的内容只有一个 ，高度远远小于2000px，这个元素内部根本不需要滚动——页面滚动的时候，是整个body在滚动，不是这个div的内部在滚动，所以你的监听器自然不会响应。

• 次要但必须修正的问题：overflow取值不合法
  CSS里overflow-x: none是无效写法！overflow的合法取值是visible、hidden、scroll、auto这些，浏览器会直接忽略这个错误属性，虽然这不是导致事件失效的核心，但也得改成规范写法。

给你修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .test-scroll {
      /* 给容器设固定高度，让内部内容能超出 */
      height: 300px;
      overflow-x: hidden; /* 把无效的none改成合法的hidden */
      overflow-y: scroll;
      border: 1px solid #000;
    }
    /* 给内部内容设置足够高的高度，让容器出现滚动条 */
    .test-scroll .inner-content {
      height: 2000px;
    }
  </style>
</head>
<body>
  <div class="test-scroll">
    <div class="inner-content">&nbsp;</div>
  </div>

  <script>
    document.querySelector('.test-scroll').addEventListener('scroll', function() {
      alert('Scroll');
    }, false);
  </script>
</body>
</html>

修正要点说明 #

1. 把.test-scroll的高度改成固定的小值（比如300px），这样内部2000px高的子元素就会超出容器，容器会出现垂直滚动条。
2. 替换了无效的overflow-x: none为overflow-x: hidden，符合CSS语法规范。
3. 新增了一个高个子的子元素，让容器真正具备滚动的条件，这时滚动容器内部，alert就会正常弹出啦。

另外补充一句：如果你本来是想监听整个页面的滚动，那应该给window或者document.body绑定scroll事件，而不是这个div哦！

内容的提问来源于stack exchange，提问作者cs1193