Question

Take a look at this site. When you scroll down, it automatically loads up a bit more of the page. Say that I have an event that runs on document.load. Is there a way to make it do that again when you scroll down and more stuff comes into view?

It’s worth mentioning that I’m trying to design a way to sort of catch all instances like this, not just the specific site I mentioned which may very well have something to latch onto when it’s doing the infinite scrolling.

Answer 1

There are deprecated DOM3 Mutation Events, like DOMSubtreeModified, which fire whenever specific mutation event occur. For performance and compatibility reasons, MDN strongly discourages their use, but they do exist. I also believe that they don’t provide information about what kind of mutation has occurred or any kind of before/after comparison.

There’s a W3C draft for DOM4 Mutation Observers, which might be implemented in some browsers currently. I know it’s at least implemented in Chrome, which uses WebKitMutationObserver like so:

var observer = new WebKitMutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

There’s a full list of mutation properties in the draft (scroll down to the green box).