I have a program that utilizes electron and puppeteer. When the user scrolls down to the bottom of the electron application page puppeteer gets triggered to scroll down in order to load more list items that sequentially get loaded onto the electron application page. On one html electron page the script works. It uses a function to load in 10 items, adds a scroll event listener which when triggered will use the aforementioned function to load in ten more. But on a different html electron page, using the same function it will load in ten different items, add the scroll event listener and attempt to keep try loading in ten more as the user scrolls. The issue is it loads in the first ten and then fails to load in the other ones when the user scrolls to the bottom, unless the dev tools is open in the electron app. I've tested it by creating alert windows when the user scrolls, so I know that the event listener is being properly appended to the document. I receive no error in the console because it works when the console is open.

Containers.js

let lastContainer, maxScrollY = getMaxScrollY(), loading = false, newPage = true, songData; //These reset after a new page has loaded 

const createContainers = (page, createContainer) => {
    const conPerCycle = 10;

    containers(conPerCycle, createContainer, page); // Initial Loader; Loads data, creates container, adds data to container

    document.addEventListener('scroll', (e) => {
        if (Math.floor(window.scrollY) == maxScrollY && !loading) {
            newPage = false;
            containers(conPerCycle, createContainer, page); // Triggered Loader; Loads data, creates container, adds data to container
        }
    });
};