Wie kann ich feststellen, ob ein Element nach dem Scrollen sichtbar ist?

Sichtbarkeit von Elementen nach dem Scrollen sicherstellen

Identifizieren von durch Scrollen ausgeblendeten Elementen

Beim dynamischen Laden von Inhalten über AJAX bleiben einige Elemente möglicherweise verborgen, sofern kein Scrollen durchgeführt wird . Die Bestimmung ihrer Sichtbarkeit innerhalb des aktuell sichtbaren Teils der Seite ist von entscheidender Bedeutung.

Lösung

Um zu überprüfen, ob ein Element nach dem Scrollen ganz oder teilweise sichtbar ist, verwenden Sie die folgende Funktion:

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));
}

Erweiterte Utility-Funktion

Führen Sie eine Utility-Funktion ein, die sowohl vollständige als auch teilweise Sichtbarkeit unterstützt prüft:

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));
    }
  }
};

Erweiterte Nutzung

Erweitern Sie den Code mit dieser Dienstprogrammfunktion:

var Utils = new Utils();

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

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

Durch die Implementierung dieser Funktionen können Sie die Sichtbarkeit von Elementen nach dem Scrollen effektiv erkennen und entsprechend reagieren.

Das obige ist der detaillierte Inhalt vonWie kann ich feststellen, ob ein Element nach dem Scrollen sichtbar ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!