Why is my scroll eventListener not firing?

Question

I'm working on building a infinite scroll feature in an Angular app. Building one step at a time, currently I'm at the part where I attach an eventListener to the #tags-panel-list and need to check it's y position.

However the eventListener I'm using is not firing any basic console.logs.

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

---

tagsPanel.html markup:

<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 controller code (used $timeout incase Angular could not see the DOM element on first load):

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);

Answer 1

You can also listen to "wheel" on modern browsers. This will pick up the scroll regardless of element.

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