Ein Artikel, der Ihnen hilft, die Positionsberechnung in js gründlich zu verstehen

Einführung

Liste der im Artikel enthaltenen APIs:

1. Scroll-bezogene API
2. Clientbezogene API
3. Offset-bezogene API
4. Element.getBoundingClientRectAPi
5. Window.getComputedStyleApi

Wir werden diese APIs Schicht für Schicht analysieren, basierend auf API-Definitionen und Anwendungsszenarien in bekannten Open-Source-Bibliotheken. Es reicht aus, um die meisten Szenarien im Zusammenhang mit der Berechnung der Elementposition bei der Arbeit abzuwickeln.

Beachten Sie, dass Sie bei der Verwendung der APIs zur Standortberechnung besonders vorsichtig sein müssen. Eine unsachgemäße Verwendung kann zu Layout-Thrashing führen und die Seitendarstellung beeinträchtigen.

scrollen

Schauen wir uns zunächst die scrollbezogenen Eigenschaften und Methoden an.

Element.scroll()

Die Methode Element.scroll() ist eine Element-Schnittstelle, die zum Scrollen zu einer bestimmten Koordinate in einem bestimmten Element verwendet wird.

element.scroll(x-Koordinate, y-Koordinate)
element.scroll(Optionen)

• Die X-Koordinate bezieht sich auf das Pixel, das Sie in horizontaler Richtung im oberen linken Bereich des Elements anzeigen möchten.
• Die y-Koordinate bezieht sich auf das Pixel, das Sie in vertikaler Richtung im oberen linken Bereich des Elements anzeigen möchten.

Das heißt, element.scroll(x,y) verschiebt die Bildlaufleiste des Elements an die entsprechende x,y-Position.

Es unterstützt auch den Aufruf von element.scroll(options) und die Übergabe zusätzlicher Konfigurationen:

{
    links: Zahl, 
    oben: Zahl,
    Verhalten: „sanft“ | „auto“ // sanftes Scrollen oder standardmäßiges direktes Scrollen}

Element.scrollHeight/scrollWidth

Element.scrollHeight: Diese schreibgeschützte Eigenschaft ist ein Maß für die Höhe des Inhalts eines Elements, einschließlich des Inhalts, der aufgrund eines Überlaufs in der Ansicht nicht sichtbar ist.

Der Wert von scrollHeight entspricht der Mindesthöhe, die das Element haben muss, damit sein Inhalt ohne Verwendung von Bildlaufleisten in das Ansichtsfenster passt. Ohne vertikale Bildlaufleiste entspricht der ScrollHeight-Wert der minimalen ClientHeight, die erforderlich ist, damit die Ansicht des Elements seinen gesamten Inhalt ausfüllt. Schließt die Polsterung des Elements ein, schließt jedoch die Umrandung und den Rand des Elements aus. scrollHeight enthält auch Pseudoelemente wie ::before und ::after.

Mit anderen Worten: Element.scrollHeight ist immer gleich clientHeight, wenn sich auf dem Element keine Bildlaufleiste befindet.
Wenn jedoch eine Bildlaufleiste angezeigt wird, bezieht sich scrollHeight auf die Höhe des unsichtbaren Inhalts des Elements. Wenn eine Bildlaufleiste angezeigt wird, ist scrollHeight immer größer als clientHeight.

• Element.scrollWidth Dies ist auch eine schreibgeschützte Eigenschaft der Inhaltsbreite des Elements, einschließlich Inhalt, der aufgrund eines Überlaufs in der Ansicht nicht sichtbar ist.

Das Prinzip ist das gleiche wie bei scrollHeight, außer dass es sich hier um die Breite statt um die Höhe handelt.

Einfach ausgedrückt: Wenn ein Element keine Bildlaufleiste hat, sind Bildlauf und Client gleichwertige Werte. Wenn eine Bildlaufleiste vorhanden ist, berechnet der Client nur die Höhe/Breite des aktuell angezeigten Elements, während beim Scrollen nicht nur die Höhe/Breite des aktuell angezeigten Elements berechnet wird, sondern auch die Höhe/Breite des durch die Bildlaufleiste des aktuellen Elements verborgenen Inhalts.

Clientbreite/-höhe + [Breite/Höhe des ausgeblendeten Inhalts der Bildlaufleiste] = Bildlaufbreite/-höhe

Element.scrollLeft/scrollTop

• Die Eigenschaft „Element.scrollTop“ ruft die Anzahl der Pixel ab, um die der Inhalt eines Elements vertikal gescrollt werden soll, oder legt diese fest.
• Mit der Eigenschaft Element.scrollLeft kann der Abstand der Bildlaufleiste des Elements zur linken Seite des Elements gelesen oder festgelegt werden.

Beachten Sie: Wenn die Inhaltsrichtung des Elements RTL (von rechts nach links) ist, befindet sich die Bildlaufleiste ganz rechts (wo der Inhalt beginnt) und der Wert von scrollLeft beträgt 0. Wenn Sie an diesem Punkt die Bildlaufleiste von rechts nach links ziehen, ändert sich scrollLeft von 0 in eine negative Zahl.

ScrollLeft/Top sind häufig verwendete APIs zum Bedienen von Bildlaufleisten in der täglichen Arbeit. Es handelt sich um einstellbare Werte. Die Position der Bildlaufleiste kann über verschiedene Werte gesteuert werden.

Tatsächlich können diese beiden Attribute denselben Effekt erzielen wie das obige Element.scroll().

Wenn bei der tatsächlichen Arbeit häufig Scrollvorgänge erforderlich sind, empfehle ich persönlich die Verwendung von better-scroll, einer universellen JS-Scroll-Bibliothek für Mobilgeräte/Web. Das interne Scrollen basiert auf der Elementtransformation und löst keine damit verbundene Umformung/Reflux aus.

Bestimmen Sie, ob das aktuelle Element eine Bildlaufleiste hat

Das Erscheinen einer Bildlaufleiste bedeutet, dass der Elementraum größer ist als der Anzeigebereich für den Inhalt. Basierend auf diesem Phänomen können wir die Regeln für die Bestimmung erhalten, ob eine Bildlaufleiste angezeigt werden soll.

export const hasScrolled = (Element, Richtung) => {
  wenn (!element || element.nodeType !== 1) return;
  wenn (Richtung === "vertikal") {
    returniere element.scrollHeight > element.clientHeight;
  } sonst wenn (Richtung === "horizontal") {
    returniere element.scrollWidth > element.clientWidth;
  }
};

Ermitteln Sie, ob der Benutzer bis zum Ende gescrollt hat

Wenn auf einem Element eine Bildlaufleiste angezeigt wird, wird im Wesentlichen die Höhe des aktuellen Elements + die Höhe der Bildlaufleiste = die Höhe des Elements selbst (einschließlich des ausgeblendeten Teils) bestimmt.

element.scrollHeight - element.scrollTop === element.clientHeight

Kunde

MouseEvent.clientX/Y

MounseEvent.clientX/Y ist ebenfalls eine schreibgeschützte Eigenschaft, die die horizontalen Koordinaten des Anwendungsclientbereichs bereitstellt, wenn das Ereignis eintritt.

Wenn Sie beispielsweise in die obere linke Ecke des Clientbereichs klicken, sind die ClientX/Y-Werte des Mausereignisses 0, unabhängig davon, ob die Seite über vertikales/horizontales Scrollen verfügt.

Tatsächlich wird MouseEvent.clientX/Y relativ zum aktuellen Ansichtsfenster (im Browser sichtbarer Bereich) berechnet.

Poste ein ganz einfaches Bild erneut:

Element.clientHeight/clientWidth

Die Eigenschaften Element.clientWidth/clinetHeight stellen die tatsächliche Breite des Elements in Pixeln dar. Diese Eigenschaft umfasst die Polsterung, schließt jedoch Rahmen, Ränder und vertikale Bildlaufleisten (sofern vorhanden) aus.

Inline-Elemente und Elemente ohne CSS-Stile haben einen clientWidth-Eigenschaftswert von 0.

Wenn keine Bildlaufleiste angezeigt wird, Element.clientWidth/Height === Element.scrollWidth/Height

Element.clientTop/clientLeft

Element.clientLeft stellt die Breite des linken Rahmens eines Elements in Pixeln dar. Wenn die Textrichtung des Elements von rechts nach links (RTL) ist und aufgrund eines Inhaltsüberlaufs auf der linken Seite eine vertikale Bildlaufleiste angezeigt wird, umfasst diese Eigenschaft die Breite der Bildlaufleiste. clientLeft schließt den linken Rand und die linke Polsterung nicht ein. clientLeft ist schreibgeschützt.

In ähnlicher Weise stellt Element.clientTop die Breite des oberen Rahmens des Elements dar und ist ebenfalls eine schreibgeschützte Eigenschaft.

Diese beiden Eigenschaften werden im täglichen Leben selten verwendet, Sie sollten sie jedoch auch kennen, um eine Verwechslung dieser Eigenschaften aufgrund ähnlicher Namen zu vermeiden.

Versatz

Mausereignis.offsetX/offsetY

Die schreibgeschützte Eigenschaft „offsetX/Y“ der Schnittstelle „MouseEvent“ gibt den Versatz zwischen dem Ereignisobjekt und der Polsterkante des Zielknotens in X/Y-Achsenrichtung an.

Ich glaube, dass Studenten, die „offest“ verwendet haben, ein tiefes Verständnis für dieses Attribut haben. Es ist der Versatz relativ zur linken/oberen Seite des übergeordneten Elements.

Beachten Sie, dass das auslösende Element e.target ist. Seien Sie besonders vorsichtig, wenn das Ereignisobjekt ein untergeordnetes Element enthält, wenn Sie sich in das Innere des untergeordneten Elements bewegen. e.offsetX/Y ist der Versatz relativ zur oberen linken Ecke des untergeordneten Elements.

Offsetbreite/Offsethöhe

HTMLElement.offsetWidth/Height ist eine schreibgeschützte Eigenschaft, die die Layoutbreite/-höhe eines Elements zurückgibt.

Die sogenannte Layoutbreite ist relativ zu den oben genannten Werten für clientHeight/Width und offsetHeight/Width. Sie umfasst nicht die Breite/Höhe des Rahmens und der Bildlaufleiste (sofern vorhanden).

OffsetWidth/offsetHeight gibt die Layoutbreite/-höhe des Elements zurück, einschließlich der Elementgrenze, der Polsterung der horizontalen/vertikalen Linien, der vertikalen/horizontalen Bildlaufleiste (Scrollbar) (sofern vorhanden) und der durch CSS festgelegten Breite.

Versatz oben/links

HTMLElement.offsetLeft ist eine schreibgeschützte Eigenschaft, die den Pixelwert des Versatzes der oberen linken Ecke des aktuellen Elements vom linken Rand des Knotens HTMLElement.offsetParent zurückgibt.

Beachten Sie, dass der zurückgegebene Offset relativ zur linken Kante des Knotens HTMLElement.offsetParent ist.

Was ist HTMLElement.offsetParent?

HTMLElement.offsetParent ist eine schreibgeschützte Eigenschaft, die einen Zeiger auf das nächstgelegene (in Bezug auf die enthaltene Hierarchie) positionierte Element zurückgibt, das das Element oder das nächstgelegene Tabellen-, td-, th- oder Body-Element enthält. Wenn style.display des Elements auf „none“ gesetzt ist, gibt offsetParent null zurück. offsetParent ist nützlich, da offsetTop und offsetLeft relativ zu seinen Füllgrenzen sind. -- MDN

Um es im Klartext auszudrücken: Wenn der übergeordnete Komponentenknoten des aktuellen Elements keine Tabelle, kein td, kein th hat und das Positionsattribut für positionierte Elemente relativ, absolut usw. ist, gibt offsetLeft/offsetTop den Versatz von der linken/oberen Ecke des Textkörpers zurück.

Wenn sich unter den Vorgängerelementen ein positioniertes Element (oder das oben erwähnte Tag-Element) befindet, kann es als OffsetParent des Elements bezeichnet werden. Der OffsetLeft/OffsetTop-Wert eines Elements entspricht der Entfernung von der linken Seite seines linken Rands/der oberen Seite seines oberen Rands zum linken Rand seines OffsetParent-Elements.

Schauen wir uns dieses Bild an:

Berechnen Sie den Abstand des Elements vom Körper

Wenn wir die Distanz zwischen einem Element und dem Körper ermitteln müssen, aber nicht feststellen können, ob das übergeordnete Element ein positioniertes Element hat (bei der Komponentenentwicklung ist meistens nicht klar, ob der übergeordnete Knoten ein positioniertes Element hat). Zu diesem Zeitpunkt müssen Sie eine Methode implementieren, die dem Offset () von jqery ähnelt: Rufen Sie den Offset des aktuellen Elements relativ zum Textkörper ab.

• Sie können offsetLeft/offsetTop nicht direkt verwenden, um es abzurufen, da nicht sicher ist, ob das übergeordnete Element ein positioniertes Element hat.
• Verwenden Sie Rekursion, um den Offset zu lösen und zu akkumulieren, wenn der aktuelle OffsetParent nicht Body ist.
• Fahren Sie rekursiv nach oben fort und fügen Sie „Offset“ zu „OffsetParent“ hinzu, bis das Body-Element gefunden wird.

const getOffsetSize = Funktion(Knoten: beliebig, Offset?: beliebig): beliebig {
  wenn (!offset) {
    Versatz = {
      x: 0,
      j: 0
    };
  }
  wenn (Knoten === Dokument.Body) Offset zurückgeben;
  offset.x = offset.x + Node.offsetLeft;
  Offset.y = Offset.y + Node.OffsetTop;
  gibt getOffsetSize zurück (Node.offsetParent, Offset);
};

Hinweis: parentNode kann hier nicht verwendet werden. Wie oben erwähnt, bezieht sich offsetLeft/top auf den Offset von HTMLElement.offsetParent und nicht auf den Offset von parentNode.

Element.getBoundingClientRect

Verwendung

Die Methode Element.getBoundingClientRect() gibt die Größe eines Elements und seine Position relativ zum Ansichtsfenster zurück.

element.getBoundingClientRect() gibt die Position relativ zur oberen linken Ecke des Ansichtsfensters zurück.

Die von element.getBoundingClientRect () zurückgegebene Höhe und Breite beziehen sich auf die Breite und Höhe des sichtbaren Bereichs des Elements (die konkrete Größe wird durch die Box-Größe bestimmt) und schließen den Inhalt, in dem die Bildlaufleiste ausgeblendet ist, nicht ein.

TIPP: Wenn es sich um ein Standard-Boxmodell handelt, entspricht die Größe des Elements der Summe aus Breite/Höhe + Polsterung + Rahmenbreite. Bei Box-Sizing: Border-Box entspricht die Größe des Elements der Breite/Höhe.

rectObject = Objekt.getBoundingClientRect();

Der Rückgabewert ist ein DOMRect-Objekt, bei dem es sich um eine Reihe von Rechtecken handelt, die von der Methode getClientRects() des Elements zurückgegeben werden, d. h. die CSS-Randgröße des Elements. Das zurückgegebene Ergebnis ist das kleinste Rechteck, das das gesamte Element enthält und über schreibgeschützte Eigenschaften (links, oben, rechts, unten, x, y, Breite und Höhe) verfügt, die den gesamten Begrenzungsrahmen in Pixeln beschreiben. Andere Eigenschaften als Breite und Höhe werden relativ zur oberen linken Ecke des Ansichtsfensters berechnet.

Breite und Höhe werden zum Berechnen der Größe des Elements verwendet und andere Attribute beziehen sich auf die obere linke Ecke des Ansichtsfensters.

Das Scrollen innerhalb des Ansichtsfensterbereichs (oder anderer scrollbarer Elemente) wird bei der Berechnung des Begrenzungsrechtecks ​​berücksichtigt. Dies bedeutet, dass sich die oberen und linken Eigenschaftswerte sofort ändern, wenn sich die Scrollposition ändert (ihre Werte sind also relativ zum Ansichtsfenster, nicht absolut). Wenn Sie den Eigenschaftswert relativ zur oberen linken Ecke der gesamten Webseite benötigen, fügen Sie einfach die aktuelle Scrollposition (über window.scrollX und window.scrollY) zu den oberen und linken Eigenschaftswerten hinzu. Auf diese Weise können Sie einen Wert erhalten, der unabhängig von der aktuellen Scrollposition ist.

Berechnet, ob das Element im Ansichtsfenster erscheint

Der Vorteil besteht darin, dass der Abstand des Elements vom Ansichtsfenster kleiner ist als die Größe des Ansichtsfensters.

Beachten Sie, dass selbst ein negativer Wert bedeutet, dass das Element einmal auf dem Bildschirm erschien, jetzt aber nicht mehr angezeigt wird. (Wie rutschen)

So wird der Quellcode der Vue-Lazy-Image-Lazy-Loading-Bibliothek beurteilt.

 istInAnsicht():boolean {
    const rect = this.el.getBoundingClientRect()
    returniere rechteck.oben < fenster.innereHöhe && rechteck.links < fenster.innereBreite
  }

Wenn rect.top < window.innerHeight, bedeutet dies, dass das aktuelle Element bereits auf der Seite erschienen ist, und dasselbe gilt für left.

window.getComputedStyle

Verwendung

Die Methode Window.getComputedStyle() gibt ein Objekt zurück, das die Werte aller CSS-Eigenschaften eines Elements meldet, nachdem das aktive Stylesheet angewendet und alle zugrunde liegenden Berechnungen aufgelöst wurden, die diese Werte enthalten könnten. Auf private CSS-Eigenschaftswerte kann über die vom Objekt bereitgestellte API oder durch einfache Indizierung anhand des CSS-Eigenschaftsnamens zugegriffen werden.

let style = window.getComputedStyle(element, [pseudoElt]);

Element

• Ein Element, das verwendet wird, um den berechneten Stil abzurufen.

pseudoElt Optional

• Eine Zeichenfolge, die die zu vergleichenden Pseudoelemente angibt. Muss für normale Elemente weggelassen werden (oder null sein).

Der zurückgegebene Stil ist ein Live-CSSStyleDeclaration-Objekt, das sich automatisch aktualisiert, wenn sich der Stil des Elements ändert.

Zusammenfassen

Dies ist das Ende dieses Artikels zur Positionsberechnung in js. Weitere relevante Inhalte zur Positionsberechnung in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!