Testen ob ein HTML Element sichtbar ist

Question

Wie kann ich mit Javascript prüfen ob ein bestimmtes HTML Element im sichtbaren Bereich der Seite ist oder nicht?

Answer 1

Du kannst die Position des Elements (left, top, right, bottom, x, y, width, height) mit der Funktion getBoundingClientRect ermitteln und mit der Position des sichtbaren Bereichs des Browsers vergleichen.

var el = document.getElementById("myElement");
var rect = el.getBoundingClientRect();

if( rect.top >= 0 
    && rect.left >= 0
    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) 
    && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ) {

    concole.log("Element ist im sichtbaren Bereich");

}

Answer 2

Du kannst die Intersection Observer API nutzen.

<div style="height: 1000px;"></div> <!-- Platzhalter, um die Seite zu verlängern -->
<div id="meinElement" style="width: 100px; height: 100px; background-color: red;"></div> 

<script>
    function handleIntersection(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                console.log('Das Element ist im sichtbaren Bereich.');
            } else {
                console.log('Das Element ist nicht mehr im sichtbaren Bereich.');
            }
        });
    }

    var observer = new IntersectionObserver(handleIntersection);
    var target = document.getElementById('meinElement');
    observer.observe(target);
</script>