在body上使用addEventListener滚动事件绑定不起作用。为什么？

Question

在下面的页面滚动时，javascript的scroll事件不会调用function counter()。为什么？

JS

$(function(){ 
      var body = document.getElementsByTagName('body'); 

      body[0].addEventListener('scroll',counter, true); 
      var x = 0; 
      function counter() { 
       document.getElementById("demo").innerHTML = x += 1; 
      } 
     }); 

HTML

<div id="demo"></div> 

Answer 1

• 设置height属性的文件，使滚动事件实际上可能
• body[0].addEventListener('scroll', counter, true)不会做出任何影响。 body标签是整个文档 - 参考文档而不是
• 它可以在不使用jQuery

(function() { 
 
    document.addEventListener('scroll', counter, true); 
 
    var x = 0; 
 
    function counter() { 
 
    document.getElementById("demo").innerHTML = x += 1; 
 
    } 
 
})();

body { 
 
    height: 1000px; 
 
} 
 
#demo { 
 
    position: fixed; 
 
}

<div id="demo"></div>

Answer 2

进行滚动事件添加到全局窗口对象，并确保滚动条实际上​​是可见的，以便滚动事件触发。

检查下面的代码片段。

$(function() { 
 
    var x = 0; 
 

 
    window.addEventListener('scroll', counter, true); 
 

 
    function counter() { 
 
    document.getElementById("demo").innerHTML = x += 1; 
 
    } 
 
});

body { 
 
    height: 1000px; 
 
    background-color: #E6E6E6; 
 
} 
 

 
#demo { 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="demo"></div>

检查this了解更多信息