¿Solo quiero ejecutar una función cuando la altura de mi div llegue al final de la página en el desplazamiento? ¿Hay alguna forma de hacerlo usando JavaScript?
La solución JS más contemporánea es usar un observador de intersección. ( MDN ). Es menos intensivo en recursos que las soluciones anteriores que escuchan el evento de desplazamiento. Con el observador de intersección, puede decidir exactamente dónde desea que se active la función y puede reutilizarla como muestra este ejemplo:
class CountUp { constructor(triggerEl, counterEl) { const counter = document.querySelector(counterEl) const trigger = document.querySelector(triggerEl) let num = 0 const countUp = () => { if (num <= counter.dataset.stop) ++num counter.textContent = num } const observer = new IntersectionObserver((el) => { if (el[0].isIntersecting) { const interval = setInterval(() => { (num < counter.dataset.stop) ? countUp() : clearInterval(interval) }, counter.dataset.speed) } }, { threshold: [0] }) observer.observe(trigger) } } // Initialize any number of counters: new CountUp('#start1', '#counter1') new CountUp('#start2', '#counter2') p { font-weight: bold; text-align: center; margin-top: 5%; font-size: 2rem; color: green; } .start-counter { text-align: center; padding: 0 0 5rem; } .counter { text-align: center; /* transition: .1s ease; */ font-size: 14rem; color: red; font-weight: bold; font-family: sans-serif; padding: 0 0 30rem; } <p>Scroll down ↓</p> <div style="height:100vh;"></div> <div id="start1" class="start-counter">Counter starts counting here!</div> <div id="counter1" class="counter" data-stop="199" data-speed="20">0</div> <p>Scroll down ↓</p> <div style="height:100vh;"></div> <div id="start2" class="start-counter">Counter starts counting here!</div> <div id="counter2" class="counter" data-stop="300" data-speed="20">0</div>