Erkennt, wenn Elemente innerhalb eines scrollbaren div-Elements nicht sichtbar sind
Lesezeit: 6 Minuten
Ronny
Ich muss eine gute Lösung für das folgende Problem finden. Ich sehe viele Leute, die nach dem Tracking fragen, ob sich ein Element innerhalb oder außerhalb des Ansichtsports für die Seite oder das Browserfenster befindet. Ich muss in der Lage sein, diese Aktion zu replizieren, aber in einem DIV, das scrollt, zum Beispiel mit overflow:scroll. Kennt jemand ein gutes Beispiel für diese spezielle Aktion?
Danke im Voraus.
Adam Reis
Hier ist eine reine Javascript-Version der akzeptierten Antwort, ohne sich auf jQuery zu verlassen, und mit einigen Korrekturen für die Erkennung von Teilansichten und Unterstützung für die Anzeige von außerhalb.
function checkInView(container, element, partial) {
//Get container properties
let cTop = container.scrollTop;
let cBottom = cTop + container.clientHeight;
//Get element properties
let eTop = element.offsetTop;
let eBottom = eTop + element.clientHeight;
//Check if in view
let isTotal = (eTop >= cTop && eBottom <= cBottom);
let isPartial = partial && (
(eTop < cTop && eBottom > cTop) ||
(eBottom > cBottom && eTop < cBottom)
);
//Return outcome
return (isTotal || isPartial);
}
Und als Bonus stellt diese Funktion sicher, dass das Element sichtbar ist, wenn dies nicht der Fall ist (teilweise oder vollständig):
function ensureInView(container, element) {
//Determine container top and bottom
let cTop = container.scrollTop;
let cBottom = cTop + container.clientHeight;
//Determine element top and bottom
let eTop = element.offsetTop;
let eBottom = eTop + element.clientHeight;
//Check if out of view
if (eTop < cTop) {
container.scrollTop -= (cTop - eTop);
}
else if (eBottom > cBottom) {
container.scrollTop += (eBottom - cBottom);
}
}
In Ihrer sureInView-Funktion sollte offsetTop hinzugefügt werden let cTop = container.scrollTop + container.offsetTop
– Brian Völker
27. März 2017 um 20:22 Uhr
Das scheint bei mir nicht zu funktionieren, es unterbricht tatsächlich die Funktion in meinem Anwendungsfall.
– Adam Reis
28. März 2017 um 23:07 Uhr
Was ist der Zweck von partial Feld ein checkInView?
– oyalhi
29. November 2018 um 15:29 Uhr
Das ist ein Flag, um zu prüfen, ob das Element teilweise oder vollständig sichtbar sein soll.
Ich hatte das gleiche Problem vorher, ich bin mit der folgenden Funktion gelandet. Der erste Parameter ist für das zu überprüfende Element, der zweite ist, um zu überprüfen, ob das Element teilweise sichtbar ist. Es ist nur für die vertikale Überprüfung, Sie können es erweitern es, um nach horizontalem Scrollen zu suchen.
function checkInView(elem,partial)
{
var container = $(".scrollable");
var contHeight = container.height();
var contTop = container.scrollTop();
var contBottom = contTop + contHeight ;
var elemTop = $(elem).offset().top - container.offset().top;
var elemBottom = elemTop + $(elem).height();
var isTotal = (elemTop >= 0 && elemBottom <=contHeight);
var isPart = ((elemTop < 0 && elemBottom > 0 ) || (elemTop > 0 && elemTop <= container.height())) && partial ;
return isTotal || isPart ;
}
Vielen Dank. Ich habe verschiedene Lösungen dafür gesehen, und dies ist die klarste und sauberste Methode, um dies zu erreichen. Vielen Dank!
– Ronny
1. Mai 2013 um 23:19 Uhr
schön zu hören, ich werde ein einfaches jquery-plugin dafür machen 🙂
– Akram Berkawy
2. Mai 2013 um 9:52 Uhr
Was ist, wenn der Container scrollbar ist und nicht angezeigt wird?
– Aswin
14. April 2020 um 1:20 Uhr
Jonny Ngan
Basierend auf der besten Antwort. Anstatt Ihnen nur zu sagen, ob ein Element teilweise sichtbar ist oder nicht. Ich habe ein kleines Extra hinzugefügt, damit Sie einen Prozentsatz (0-100) eingeben können, der Ihnen sagt, ob das Element zu mehr als x % sichtbar ist.