Greasy Fork

Automatic button loading

Does nybody know how to make a script that will automatically click on buttons that load more items to the current page? Examples include certain youtube pages, comingsoon.net and mentalfloss.com.

This logic is simple:

1. wait for the More button to scroll closer than 2 screen heights from the top visible edge of the page (or in other words when the button is one page below the bottom edge)
2. click it
3. reset the reference to the button so that next time a scroll event occurs the newly added More button will be watched - the button is re-created each time by the site

// ==UserScript==
// @name          Infinite scroll for comingsoon.net
// @include       http://www.comingsoon.net/*
// @grant         none
// @run-at        document-end
// ==/UserScript==

var more;
document.addEventListener('scroll', function(e) {
  more = more || document.querySelector('.js-load-more-button');
  if (more.getBoundingClientRect().top <= window.innerHeight * 2) {
    more.click();
    more = null;
  }
});

The next one is simpler because the button isn't re-created by the site, so we only check the scroll position.

// ==UserScript==
// @name          Infinite scroll for mentalfloss.com
// @include       http://mentalfloss.com/*
// @grant         none
// @run-at        document-end
// ==/UserScript==

var more = document.querySelector('#load-more');
document.addEventListener('scroll', function(e) {
  if (more.getBoundingClientRect().top <= window.innerHeight * 2)
    more.click();
});

So will these work on any site with a button that contains the string "show more" or "load more?"

No. Sites usually implement the button in unique fashion.