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

Lacreshalacrimal

Answer 1

It's actually the element with ID tags-col that is scrolling:

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

Plunker

Driedup

Answer 2

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

Expressionism

The wheel event is fired when a user scrolls on a mouse wheel or touchpad. It will not fire when a scroll is triggered from a key press or click on the scrollbar. – Gromyko

Answer 3

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

Curet