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

将滚动事件添加到全局窗口对象，并确保滚动条实际可见，以便触发滚动事件。

检查以下代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

检查this以获取更多信息

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

2 个答案: