Wie kann man prüfen, ob ein Element nach dem Scrollen sichtbar ist?

Question

Ich lade Elemente über AJAX. Einige von ihnen sind nur sichtbar, wenn Sie die Seite nach unten scrollen. Gibt es eine Möglichkeit, wie ich wissen kann, ob ein Element jetzt im sichtbaren Teil der Seite ist?

Answer 1

Die meisten Antworten hier berücksichtigen nicht, dass ein Element auch ausgeblendet werden kann, weil es aus der Sicht eines Divs gescrollt wird, nicht nur aus der Sicht der gesamten Seite.

Um diese Möglichkeit abzudecken, müssen Sie grundsätzlich prüfen, ob das Element innerhalb der Grenzen jedes seiner Elternteile positioniert ist.

Diese Lösung tut genau das:

function(element, percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = element.getBoundingClientRect();
    var parentRects = [];

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

Außerdem können Sie angeben, wie viel Prozent des Bildes in jeder Richtung sichtbar sein müssen.
Sie deckt nicht die Möglichkeit ab, dass sie aufgrund anderer Faktoren verborgen ist, wie z. B. display: hidden .

Dies sollte in allen gängigen Browsern funktionieren, da es nur getBoundingClientRect . Ich habe es persönlich in Chrome und Internet Explorer 11 getestet.

Answer 2

Die einfachste Lösung, die ich dafür gefunden habe, ist Schnittpunkt Beobachter API :

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        console.log('Element has just become visible in screen');
}, { threshold: [0] });

observer.observe(document.querySelector("#main-container"));

Answer 3

isScrolledIntoView ist eine sehr notwendige Funktion, also habe ich sie ausprobiert, sie funktioniert für Elemente, die nicht höher als das Viewport sind, aber wenn das Element größer als das Viewport ist, funktioniert sie nicht. Um dies zu beheben, ändern Sie einfach die Bedingung

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

dazu:

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

Siehe Demo hier: http://jsfiddle.net/RRSmQ/

Answer 4

Hier ist eine andere Lösung:

<script type="text/javascript">
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right ||    viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 };

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).on('scroll', function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
});
</script>

Siehe in JSFiddle

Answer 5

Dabei werden alle Auffüllungen, Umrandungen oder Ränder des Elements sowie Elemente, die größer sind als das Ansichtsfenster selbst, berücksichtigt.

function inViewport($ele) {
    var lBound = $(window).scrollTop(),
        uBound = lBound + $(window).height(),
        top = $ele.offset().top,
        bottom = top + $ele.outerHeight(true);

    return (top > lBound && top < uBound)
        || (bottom > lBound && bottom < uBound)
        || (lBound >= top && lBound <= bottom)
        || (uBound >= top && uBound <= bottom);
}

Verwenden Sie dazu etwas in der Art:

var $myElement = $('#my-element'),
    canUserSeeIt = inViewport($myElement);

console.log(canUserSeeIt); // true, if element is visible; false otherwise