¿Cuál es la fórmula para verificar si la parte más baja del div está visible en la ventana gráfica? No importa que la mitad superior sea visible o se oculte mientras se desplaza el div
Puede usar IntersectionObserver para reconocer si hay algo en la pantalla. Si crea un marcador de posición y lo magnetiza en la parte inferior de un div principal, puede hacerlo posible.
Pero si no desea utilizar la API de IntersectionObserver, puede probar getBoundingClientRect() + window.innerHeight como se muestra a continuación:
const targetEl = document.querySelector('#target'); const windowsHeight = window.innerHeight; // I heartily recommend to use some kind of throttling (lo-dash.throttle) here to reduce amount of callback executions document.addEventListener('scroll', () => { const bottom = targetEl.getBoundingClientRect().bottom; if (windowsHeight > bottom) { console.log('bottom is visible'); } else { console.log('bottom is hidden'); } }) /* All css are just for the demo, you only need a JS code */ body { padding: 300px 20px; } #target { height: 2000px; width: 100%; background-color: gray; } <div id="target"> content here </div>