为什么滚动事件在我的 div 中不起作用？

Question

我有一个 html body 的 height 和 width 属性设置为 100%，还有一个大 viewport div 用于滚动。

我想在桌面和移动浏览器中捕捉事件。

但是现在，当 viewport div 滚动时，它不起作用。

;
(function() {
  var viewport = document.getElementById('viewport');

  function test() {
    console.log("aaa");
  }

  viewport.addEventListener('scroll', test, false);
  //nothing happen here

  window.addEventListener('resize', function() {

  }, false);

})();

#box {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

#viewport {
  width: 12222px;
  height: 5000px;
  position: relative;
  top: 0;
  left: 0;
  background-color: gray;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

#info {
  position: fixed;
  top: 30%;
  font-size: 2em;
  z-index: 1;
  width: 100%;
  text-align: center;
  color: #fff;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


</head>

<body>

  <p id="info">text</p>
  <div id="viewport">
    <div id="box"></div>
  </div>

</body>

</html>

我怎样才能让它工作？

Answer 1

它不起作用，因为 scroll 事件在 body 上触发，而不是在您的“.viewport”元素上触发。尝试

;
(function() {
var viewport = document.getElementsByTagName('body')[0];

function test() {
  console.log("aaa");
}

viewport.addEventListener('scroll', test, false);
//nothing happen here

window.addEventListener('resize', function() {

}, false);

})();

Answer 2

滚动事件总是在 body 元素上触发，直到您将 body 设置为不可滚动的样式："overflow: hidden"。然后使页面的 div 或部分可滚动。作为参考，使用解释所有细节的 link：Prevent body scrolling but allow overlay scrolling

为什么滚动事件在我的 div 中不起作用？

Why is the scroll event not working in my div?

html

javascript

dom-events