window.innerHeight: it gives the height of the page that is visible. Visible height.

document.body.scrollHeight: It gives the actual height of the full page.

Window.scrolly: How much you have scrolled the webpage in the y-axis.

Example :

**c**onst [ data, setData] =useState([])
const [ loading, setLoading] =useState(false)

useEffect(()=>{
	fetchData()
		
	window.addEventListener("scroll", handleScroll);
	
	return ()=> window.removeEventListener("scroll", handleScroll);
},[])

function handleScroll(){
	if(window.scrollY + window.innerHeight >= document.body.scrollHeight) {
		fetchData();
	}
}

const fetchData= async ()=>{
	setLoading(false)
	const res = await fetch("url")
	const data = await res.json()
	setdata( prevState => [...preState, ...data])
	setLoading(false)
}
return(
	<div class="flex flex-wrap " >
		//display list cards.
		// display Loading UI
		{showLoading && <ShimmerUi />}
	< /div>
)