Jetzt die meisten Browser Unterstützung getBoundingClientRect Methode, die sich zur besten Praxis entwickelt hat. Die Verwendung einer alten Antwort ist sehr langsam, nicht korrekt y hat mehrere Bugs .
Die als richtig ausgewählte Lösung lautet fast nie präzise .
Diese Lösung wurde mit Internet Explorer 7 (und höher), iOS 5 (und höher) und Safari getestet, Android 2.0 (Eclair) und höher, BlackBerry, Opera Mobile und Internet Explorer Mobile 9 .
function isElementInViewport (el) {
// Special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
);
}
Wie zu verwenden:
Sie können sicher sein, dass die oben angegebene Funktion zum Zeitpunkt ihres Aufrufs eine korrekte Antwort liefert, aber was ist mit der Verfolgung der Sichtbarkeit des Elements als Ereignis?
Fügen Sie den folgenden Code am Ende Ihrer <body> Tag:
function onVisibilityChange(el, callback) {
var old_visible;
return function () {
var visible = isElementInViewport(el);
if (visible != old_visible) {
old_visible = visible;
if (typeof callback == 'function') {
callback();
}
}
}
}
var handler = onVisibilityChange(el, function() {
/* Your code go here */
});
// jQuery
$(window).on('DOMContentLoaded load resize scroll', handler);
/* // Non-jQuery
if (window.addEventListener) {
addEventListener('DOMContentLoaded', handler, false);
addEventListener('load', handler, false);
addEventListener('scroll', handler, false);
addEventListener('resize', handler, false);
} else if (window.attachEvent) {
attachEvent('onDOMContentLoaded', handler); // Internet Explorer 9+ :(
attachEvent('onload', handler);
attachEvent('onscroll', handler);
attachEvent('onresize', handler);
}
*/
Wenn Sie irgendwelche DOM-Änderungen vornehmen, können diese natürlich die Sichtbarkeit Ihres Elements verändern.
Leitlinien und häufige Fallstricke:
Vielleicht müssen Sie den Seitenzoom / das Einklemmen von Mobilgeräten verfolgen? jQuery sollte behandeln vergrößern/verkleinern browserübergreifend, sonst erste o zweite Link sollte Ihnen helfen.
Wenn Sie DOM ändern kann sie die Sichtbarkeit des Elements beeinträchtigen. Sie sollten die Kontrolle darüber übernehmen und die handler() manuell. Leider haben wir keine browserübergreifenden onrepaint Ereignis. Andererseits können wir so Optimierungen vornehmen und nur bei DOM-Änderungen, die die Sichtbarkeit eines Elements verändern können, eine erneute Prüfung durchführen.
Niemals innerhalb von jQuery verwenden $(document).ready() nur, weil es wurde keine Garantie CSS angewendet in diesem Moment. Ihr Code kann lokal mit Ihrem CSS auf einer Festplatte funktionieren, aber sobald er auf einem entfernten Server liegt, wird er fehlschlagen.
Nach DOMContentLoaded abgefeuert wird, Stile angewendet werden pero die Bilder sind noch nicht geladen . Wir sollten also hinzufügen window.onload Ereignishörer.
Wir können das Ereignis Zoom/Pinch noch nicht erfassen.
Der letzte Ausweg könnte der folgende Code sein:
/* TODO: this looks like a very bad code */
setInterval(handler, 600);
Sie können die großartige Funktion nutzen pageVisibiliy der HTML5-API, wenn Sie sich dafür interessieren, ob die Registerkarte mit Ihrer Webseite aktiv und sichtbar ist.
TODO: Diese Methode kann zwei Situationen nicht behandeln:
1 Stimmen
Es kommt darauf an, was Sie unter sichtbar verstehen. Wenn Sie meinen, dass es derzeit auf der Seite angezeigt wird, können Sie es anhand des y-Offsets des Elements und der aktuellen Bildlaufposition berechnen.
1 Stimmen
Ich habe hinzugefügt meine eigene Lösung die dieses Problem löst
1 Stimmen
Berücksichtigt eine dieser Lösungen den Z-Index eines Dom-Knotens und wie das die Sichtbarkeit speziell durch möglicherweise Ausblenden von Elementen mit einem niedrigeren Z-Index beeinflussen könnte?
1 Stimmen
Keine der angebotenen Antworten funktioniert mit absolut positionierten Elementen.
1 Stimmen
Eine Antwort für 2019: IntersectionObserver
3 Stimmen
Es gibt eine Million Antworten und die meisten sind lächerlich lang. Siehe hier für einen Zweizeiler
0 Stimmen
Verwenden Sie die Schnittpunkt-Beobachter-API, um zu erkennen, ob sich ein Element im Ansichtsfenster befindet, Details hier - frontendguruji.com/blog/
0 Stimmen
Zusätzlich zu den Antworten auf die Fragen von Intersection Observer eignet sich dieser Visualizer hervorragend für die Konfiguration der Variablen für Intersection Observer: codepen.io/michellebarker/pen/xxwLpRG