Ich muss die sichtbare Höhe eines Div innerhalb eines scrollbaren Bereichs abrufen. Ich halte mich mit jQuery für ziemlich anständig, aber das macht mich total fertig.
Angenommen, ich habe eine rote Div in einer schwarzen Hülle:
In der obigen Grafik würde die jQuery-Funktion 248, den sichtbaren Teil des div, zurückgeben.
Sobald der Benutzer wie in der obigen Grafik über den oberen Rand des div gescrollt hat, meldet er 296.
Sobald der Benutzer über das div gescrollt hat, meldet er erneut 248.
Offensichtlich werden meine Zahlen nicht so konsistent und klar sein wie in dieser Demo, oder ich würde nur hart für diese Zahlen codieren.
Ich habe eine Theorie:
- Holen Sie sich die Höhe des Fensters
- Holen Sie sich die Höhe der div
- Holen Sie sich den anfänglichen Versatz des div vom oberen Rand des Fensters
- Holen Sie sich den Offset, während der Benutzer einen Bildlauf durchführt.
- Wenn der Versatz positiv ist, bedeutet dies, dass die Oberseite des Div noch sichtbar ist.
- Wenn es negativ ist, wurde die Oberseite des Div durch das Fenster verdeckt. Zu diesem Zeitpunkt könnte das Div entweder die gesamte Höhe des Fensters einnehmen oder der Boden des Div könnte angezeigt werden
- Wenn die Unterseite des Div angezeigt wird, ermitteln Sie die Lücke zwischen der Div und der Unterseite des Fensters.
Es scheint ziemlich einfach zu sein, aber ich kann meinen Kopf einfach nicht darum wickeln. Ich werde morgen früh einen weiteren Sprung machen; Ich dachte nur, einige von euch Genies könnten helfen.
Vielen Dank!
UPDATE: Ich habe das selbst herausgefunden, aber es sieht so aus, als wäre eine der folgenden Antworten eleganter, also werde ich das stattdessen verwenden. Für die Neugierigen habe ich mir Folgendes ausgedacht:
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});
quelle
Antworten:
Hier ist ein schnelles und schmutziges Konzept. Grundsätzlich wird
offset().top
das Element mit dem oberenoffset().top + height()
Rand des Fensters und dem unteren Rand des Fensters verglichen :Beispiel Geige
edit - kleines Update, um auch die Logik auszuführen, wenn die Fenstergröße geändert wird.
quelle
div
s einzustellen, ohne nur den Code zu wiederholen. Gibt es eine Möglichkeit, dies zu tun?Berechnen Sie die Menge an px, die sich ein Element (Höhe) im Ansichtsfenster befindet
Geigen-Demo
Diese winzige Funktion gibt die Menge
px
eines Elements zurück, die im (vertikalen) Ansichtsfenster sichtbar ist :Verwenden Sie wie:
das ist es.
jQuery
.inViewport()
PluginjsFiddle-Demo
Von oben können Sie die Logik extrahieren und ein Plugin wie dieses erstellen:
Verwenden Sie wie:
Ihre Selektoren hören das Fenster dynamisch ab
scroll
und gebenresize
über den ersten Rückruffunktionsargument auch den Anfangswert für DOM bereit zurückpx
.quelle
<meta name="viewport" content="width=your_size">
HTML-Abschnitt head hinzufügen .content="width=1259"
für die Mehrheit geeignet ist . Hast du escontent="width=device-width, initial-scale=1"
stattdessen versucht ?<meta name="viewport" content="your_content">
Erklärung hinzuzufügen :)visible height px
ein Objekt zurückzugeben. Eine solche Idee finden Sie in dieser Geige: jsfiddle.net/RokoCB/6xjq5gyy (Entwicklerkonsole öffnen) um die Protokolle zu sehen)Hier ist eine Version von Rorys Ansatz oben, außer dass sie als jQuery-Plugin geschrieben wurde. Es kann allgemeinere Anwendbarkeit in diesem Format haben. Tolle Antwort, Rory - danke!
Kann mit folgendem Aufruf aufgerufen werden:
jsFiddle
quelle