为什么我的滚动事件监听器没有触发？答案

【问题标题】：Why is my scroll eventListener not firing?为什么我的滚动事件监听器没有触发？
【发布时间】：2015-08-18 06:58:56
【问题描述】：

我正在努力在 Angular 应用程序中构建无限滚动功能。一步一步构建，目前我在将eventListener 附加到#tags-panel-list 的部分，需要检查它的y 位置。

但是我使用的eventListener 没有触发任何基本的console.logs。

Plnkr：http://plnkr.co/edit/7OnKAGvVNXWLwN5fZqJu?p=preview

tagsPanel.html 标记：

<section id="tags-col" class="tag-column column">
    <ul id="tags-panel-list">
        <li ng-repeat="tag in tags">
          <div class="tag">{{tag.term}}</div>
        </li>
    </ul>
</section>

tagsPanelDirective 控制器代码（使用 $timeout 以防 Angular 在首次加载时无法看到 DOM 元素）：

var scrollingElement =  function(event) {
    // I do not see these console logs in the chrome dev inspector
    console.log('scrolling...');
    console.log(event);
};

$timeout(function() {
    document.getElementById('tags-panel-list').addEventListener('scroll', scrollingElement);
}, 250);

【问题讨论】：

标签： javascript angularjs dom-events event-listener

【解决方案1】：

实际上是 ID 为 tags-col 的元素正在滚动：

$timeout(function() {
  document.getElementById('tags-col').addEventListener('scroll', scrollingElement);
}, 250);

Plunker

【讨论】：

【解决方案2】：

您还可以在现代浏览器上收听“wheel”。无论元素如何，这都会拾取滚动。

document.addEventListener("wheel", function(event) {
    console.log(event);
});

【讨论】：

当用户在鼠标滚轮或触摸板上滚动时会触发wheel 事件。当按键或点击滚动条触发滚动时，它不会触发。

【解决方案3】：

// only this work
document.addEventListener('scroll', function(e) {
  console.log(123);
  console.log($(window).scrollTop());
})

【讨论】：