CODEWITHSUNDEEP
javascriptangularjsdom-eventsevent-listener
Leon Gaban
Leon Gaban

Reputation: 39044

Why is my scroll eventListener not firing?

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

Upvotes: 8

Views: 14006

Answers (3)

Oakley Z
Oakley Z

Reputation: 139

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

Upvotes: 0

Jacksonkr
Jacksonkr

Reputation: 32247

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

Upvotes: 13

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

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

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

Plunker

Upvotes: 9

Related Questions