在主体上使用addEventListener进行滚动事件绑定不起作用。 为什么？

Question

In the following, the javascript's scroll event does not call the function counter() when the page is scrolled. Why?

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

• set height property to the document, to make the scroll event actually possible
• body[0].addEventListener('scroll', counter, true) won't make any effects. body tag is the whole document - refer to the document instead
• it can be done without using 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

Add the scroll event to the global window object and make sure that a scrollbar is actually visible so that the scroll event fires.

Check the below code snippet.

 $(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> 

Check this for more information