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

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

Answer 2

Es gibt eine Plugin für jQuery namens siehe die ein neues Ereignis "inview" hinzufügt.

---

Hier ist etwas Code für ein jQuery-Plugin, das keine Ereignisse verwendet:

$.extend($.expr[':'],{
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});

(function( $ ) {
    $.fn.inView = function() {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
        ot = $(this).offset().top,
        wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();

        return ot > st && ($(this).height() + ot) < (st + wh);
    };
})( jQuery );

Dies habe ich in einem Kommentar hier gefunden ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) von einem Kerl namens James

Answer 3

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
     elemBottom = elemTop + $(elem).height();
   //Is more than half of the element visible
   return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}

Answer 4

Aufbauend auf diese großartige Antwort können Sie es mit ES2015+ noch ein wenig weiter vereinfachen:

function isScrolledIntoView(el) {
  const { top, bottom } = el.getBoundingClientRect()
  return top >= 0 && bottom <= window.innerHeight
}

Wenn Sie sich nicht darum kümmern, dass der obere Teil aus dem Fenster fliegt, sondern nur, dass der untere Teil gesehen wurde, kann dies vereinfacht werden zu

function isSeen(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight
}

oder auch der Einzeiler

const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight

Answer 5

Der Javascript-Code könnte wie folgt geschrieben werden:

window.addEventListener('scroll', function() {
    var element = document.querySelector('#main-container');
    var position = element.getBoundingClientRect();

    // checking whether fully visible
    if(position.top >= 0 && position.bottom <= window.innerHeight) {
        console.log('Element is fully visible in screen');
    }

    // checking for partial visibility
    if(position.top < window.innerHeight && position.bottom >= 0) {
        console.log('Element is partially visible in screen');
    }
});

und in react js geschrieben als:

    componentDidMount() {
        window.addEventListener('scroll', this.isScrolledIntoView);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.isScrolledIntoView);
    }

  isScrolledIntoView() {
        var element = document.querySelector('.element');
        var position = element.getBoundingClientRect();

        // checking whether fully visible
        if (position.top >= 0 && position.bottom <= window.innerHeight) {
            console.log('Element is fully visible in screen');
        }
        // checking for partial visibility
         if (position.top < window.innerHeight && position.bottom >= 0) {
            console.log('Element is partially visible in screen');
         }
    }