What is the formula to check if the lowest part of the div is visible in the viewport? It doesn't matter upper half is visible or gets hidden while scrolling the div
You can use IntersectionObserver to recognise if something is on screen. If you make a placeholder and magnetise it to the bottom of a parent div then you can make it possible.
But if you don't want to use IntersectionObserver API you can try getBoundingClientRect() + window.innerHeight like shown below:
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>