Erkennen, wenn Elemente in einem verschiebbaren Teil nicht sichtbar sind

9

Ich muss eine gute Lösung für das folgende Problem finden. Ich sehe eine Menge Leute, die nach Tracking fragen, wenn sich ein Element innerhalb oder außerhalb des View Port für die Seite oder das Browserfenster befindet. Ich muss in der Lage sein, diese Aktion zu replizieren, aber in einem DIV, das scrollt, mit Überlauf: scroll zum Beispiel. Kennt jemand ein gutes Beispiel für diese spezielle Aktion?

Vielen Dank im Voraus.

    
Ronny 30.04.2013, 20:00
quelle

6 Antworten

18

Ich hatte das gleiche Problem vor, ich habe mit der folgenden Funktion endete.der erste Parameter ist für das Element zu überprüfen, die zweite ist zu prüfen, ob das Element teilweise intview.it ist nur für die vertikale Prüfung, Sie können es erweitern, um nach horizontalem Scrollen zu suchen.

%Vor%

Überprüfen Sie es auf jsFiddle .

    
Akram Berkawy 30.04.2013, 21:19
quelle
5

Hier ist eine reine Javascript-Version der akzeptierten Antwort, ohne auf jQuery angewiesen zu sein und mit einigen Fixes für die Erkennung von Partial-In-View und die Unterstützung von Out-of-View.

%Vor%

Und als Bonus stellt diese Funktion sicher, dass das Element angezeigt wird, wenn es nicht (teilweise oder vollständig) ist:

%Vor%     
Adam Reis 17.05.2016 20:07
quelle
1

Hier ist eine reine Javascript-Lösung.

%Vor%     
Raju 31.10.2016 11:42
quelle
1
___ answer16309126 ___

Ich hatte das gleiche Problem vor, ich habe mit der folgenden Funktion endete.der erste Parameter ist für das Element zu überprüfen, die zweite ist zu prüfen, ob das Element teilweise intview.it ist nur für die vertikale Prüfung, Sie können es erweitern, um nach horizontalem Scrollen zu suchen.

%Vor%

Überprüfen Sie es auf jsFiddle .

    
___ answer40341495 ___

Hier ist eine reine Javascript-Lösung.

%Vor%     
___ qstntxt ___

Ich muss eine gute Lösung für das folgende Problem finden. Ich sehe eine Menge Leute, die nach Tracking fragen, wenn sich ein Element innerhalb oder außerhalb des View Port für die Seite oder das Browserfenster befindet. Ich muss in der Lage sein, diese Aktion zu replizieren, aber in einem DIV, das scrollt, mit Überlauf: scroll zum Beispiel. Kennt jemand ein gutes Beispiel für diese spezielle Aktion?

Vielen Dank im Voraus.

    
___ answer37285344 ___

Hier ist eine reine Javascript-Version der akzeptierten Antwort, ohne auf jQuery angewiesen zu sein und mit einigen Fixes für die Erkennung von Partial-In-View und die Unterstützung von Out-of-View.

%Vor%

Und als Bonus stellt diese Funktion sicher, dass das Element angezeigt wird, wenn es nicht (teilweise oder vollständig) ist:

%Vor%     
___ antwort43386795 ___

Basierend auf der besten Antwort. Anstatt nur zu sagen, ob ein Element teilweise sichtbar ist oder nicht. Ich habe ein kleines Extra hinzugefügt, so dass Sie einen Prozentsatz (0-100) eingeben können, der Ihnen sagt, ob das Element mehr als x% sichtbar ist.

%Vor%     
___ answer18879883 ___

Ich habe ein jquery-Plugin mit der letzten Antwort erstellt:

%Vor%     
___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123jquery ___ jQuery ist eine beliebte Cross-Browser-JavaScript-Bibliothek, die das DOM-Traversal (Document Object Model), die Ereignisbehandlung, Animationen und AJAX-Interaktionen erleichtert, indem die Diskrepanzen zwischen Browsern minimiert werden. Eine mit jQuery gekennzeichnete Frage sollte mit jQuery in Zusammenhang stehen, daher sollte jquery von dem fraglichen Code verwendet werden, und mindestens eine jquery-nutzungsbezogene Elemente müssen in der Frage enthalten sein. ___ tag123tracking ___ NICHT BENUTZEN, da dies als zu allgemein angesehen wird. Erwägen Sie stattdessen, ein spezifischeres Tag wie [Video-Tracking] oder [Bug-Tracking] zu verwenden. ___ answer49253390 ___

Ich konnte diese Arbeit machen, indem ich eine kleine Änderung an der pure javascript-Version machte, die gepostet wurde

%Vor%     
___ tag123html ___ HTML (Hyper Text Markup Language) ist die Standard-Auszeichnungssprache, die zum Strukturieren von Webseiten und zum Formatieren von Inhalt verwendet wird. HTML beschreibt die Struktur einer Website semantisch zusammen mit Hinweisen für die Präsentation, wodurch sie eine Markup-Sprache statt einer Programmiersprache wird. Die neueste Revision der HTML-Spezifikation ist HTML5.2. ___ tag123viewport ___ Ein Ansichtsfenster ist ein rechteckiger Anzeigebereich in Computergrafiken oder ein Ausdruck für optische Komponenten. Es hat mehrere Definitionen in verschiedenen Kontexten. Ein Ansichtsfenster ist ein Bereich des Bildschirms, der zum Anzeigen eines Teils des gesamten Bildes verwendet wird, das angezeigt werden soll. Es kann auch eine Gruppe von Regionen sein, die zusammen ein Layout bilden. ___ qstnhdr ___ Erkennen, wenn Elemente in einem verschiebbaren Teil nicht sichtbar sind ___
Jonny Ngan 13.04.2017 08:07
quelle
0

Ich habe ein jquery-Plugin mit der letzten Antwort erstellt:

%Vor%     
David 18.09.2013 18:40
quelle
0

Ich konnte diese Arbeit machen, indem ich eine kleine Änderung an der pure javascript-Version machte, die gepostet wurde

%Vor%     
palerdot 13.03.2018 10:09
quelle