Element visible in Viewport - Ist Elementes sichtbar im aktuellen Window

Diese Funktion kommt aus einem GitHub Thread. Sie testet ob ein Elemente mind. zum Teil sichtbar im aktuellen Browser-Fenster ist. Andere Funktionen die man im Internet findet bilden nur ab, dass das gesamte Element sichtbar im Browser Fenster nach scrollen ist. Dieser Code funktioniert aber auch, wenn nur ein Teil des Elementes bereits im Viewport sichtbar ist.

function is_in_viewport( element ) {
	const elem_bounding   = element.getBoundingClientRect();
	const window_height   = ( window.innerHeight || document.documentElement.clientHeight );
	const window_width    = ( window.innerWidth || document.documentElement.clientWidth );
	const is_in_view_vert = ( elem_bounding.top <= window_height ) && ( (elem_bounding.top + elem_bounding.height) >= 0 );
	const is_in_view_hori = ( elem_bounding.left <= window_width ) && ( (elem_bounding.left + elem_bounding.width) >= 0 );
 
	return ( is_in_view_vert && is_in_view_hori );
}

Page Tools