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

Damit sollte es klappen:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

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

Einfache Gebrauchsfunktion Damit können Sie eine Hilfsfunktion aufrufen, die das gesuchte Element akzeptiert und angibt, ob das Element vollständig oder teilweise sichtbar sein soll.

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Verwendung

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

Answer 2

Diese Antwort in Vanille:

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

Answer 3

Verwendung von IntersectionObserver API

(nativ in modernen Browsern)

---

Es ist einfach und effizient festzustellen, ob ein Element im Viewport oder in einem beliebigen scrollbaren Container sichtbar ist, indem man eine Beobachter .

Die Notwendigkeit der Anbringung eines scroll Ereignis und die manuelle Überprüfung des Ereignis-Callbacks entfallen, was effizienter ist:

// define an observer instance
var observer = new IntersectionObserver(onIntersection, {
  root: null,   // default is the viewport
  threshold: .5 // percentage of taregt's visible area. Triggers "onIntersection"
})

// callback is called on intersection change
function onIntersection(entries, opts){
  entries.forEach(entry =>  
    entry.target.classList.toggle('visible', entry.isIntersecting)
  )
}

// Use the observer to observe an element
observer.observe( document.querySelector('.box') )

// To stop observing:
// observer.unobserve(entry.target)

span{ position:fixed; top:0; left:0; }
.box{ width:100px; height:100px; background:red; margin:1000px; transition:.75s; }
.box.visible{ background:green; border-radius:50%; }

<span>Scroll both Vertically &amp; Horizontally...</span>
<div class='box'></div>

---

Unterstützt von modernen Browsern, einschließlich mobilen Browsern. Nicht unterstützt in IE - Browsersupport-Tabelle anzeigen

Answer 4

Update: Verwendung IntersectionObserver

---

Die beste Methode, die ich bis jetzt gefunden habe, ist die jQuery-Plugin erscheinen . Funktioniert wie ein Zauber.

Imitiert ein benutzerdefiniertes "appear"-Ereignis, das ausgelöst wird, wenn ein Element in die Ansicht scrollt oder auf andere Weise für den Benutzer sichtbar wird.

$('#foo').appear(function() {
  $(this).text('Hello world');
});

Dieses Plugin kann verwendet werden, um unnötige Anfragen für Inhalte zu verhindern, die versteckt sind oder sich außerhalb des sichtbaren Bereichs befinden.

Answer 5

Hier ist meine reine JavaScript-Lösung, die auch funktioniert, wenn sie in einem scrollbaren Container versteckt ist.

Demo hier (versuchen Sie auch, die Größe des Fensters zu ändern)

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Check if bottom of the element is off the page
  if (rect.bottom < 0) return false
  // Check its within the document viewport
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

EDIT 2016-03-26: Ich habe die Lösung aktualisiert, um für das Scrollen über das Element zu berücksichtigen, so dass es über den oberen Rand des scrollbaren Containers versteckt ist. EDIT 2018-10-08: Aktualisiert, um zu behandeln, wenn aus der Ansicht über dem Bildschirm gescrollt wird.