VisualViewport

Instanzeigenschaften

Erbt auch Eigenschaften von seinem Elterninterface, EventTarget.

VisualViewport.offsetLeft Schreibgeschützt

Gibt den Versatz der linken Kante des visuellen Viewports von der linken Kante des Layout-Viewports in CSS-Pixeln zurück.

VisualViewport.offsetTop Schreibgeschützt

Gibt den Versatz der oberen Kante des visuellen Viewports von der oberen Kante des Layout-Viewports in CSS-Pixeln zurück.

VisualViewport.pageLeft Schreibgeschützt

Gibt die x-Koordinate des visuellen Viewports relativ zum Ursprung des anfänglichen umgebenden Blocks der oberen Kante in CSS-Pixeln zurück.

VisualViewport.pageTop Schreibgeschützt

Gibt die y-Koordinate des visuellen Viewports relativ zum Ursprung des anfänglichen umgebenden Blocks der oberen Kante in CSS-Pixeln zurück.

VisualViewport.width Schreibgeschützt

Gibt die Breite des visuellen Viewports in CSS-Pixeln zurück.

VisualViewport.height Schreibgeschützt

Gibt die Höhe des visuellen Viewports in CSS-Pixeln zurück.

VisualViewport.scale Schreibgeschützt

Gibt den beim Pinch-Zoom angewendeten Skalierungsfaktor des visuellen Viewports zurück.

Instanzenmethoden

Erbt auch Methoden von seinem Elterninterface, EventTarget.

Ereignisse

Diese Ereignisse können Sie mit addEventListener() abhören oder indem Sie einen Ereignis-Listener der relevanten oneventname-Eigenschaft dieses Interface zuweisen.

resize

Wird ausgelöst, wenn das visuelle Viewport in der Größe verändert wird. Auch über die onresize-Eigenschaft verfügbar.

scroll

Wird ausgelöst, wenn das visuelle Viewport gescrollt wird. Auch über die onscroll-Eigenschaft verfügbar.

scrollend

Wird ausgelöst, wenn ein Scrollvorgang auf dem visuellen Viewport endet. Auch über die onscrollend-Eigenschaft verfügbar.

Beispiele

Ausblenden eines überlagerten Kastens bei Zoom

Dieses Beispiel, entnommen aus dem Visual Viewport README, zeigt, wie Sie ein kleines Stück Code schreiben, das einen überlagerten Kasten (der z. B. eine Werbung enthalten könnte) ausblendet, wenn der Benutzer hereinzoomt. Dies ist eine schöne Möglichkeit, die Benutzererfahrung beim Zoomen auf Seiten zu verbessern. Ein Live-Beispiel ist ebenfalls verfügbar.

const bottomBar = document.getElementById("bottom-bar");
const viewport = window.visualViewport;

function resizeHandler() {
  bottomBar.style.display = viewport.scale > 1.3 ? "none" : "block";
}

window.visualViewport.addEventListener("resize", resizeHandler);

Simulieren von position: device-fixed

Dieses Beispiel, ebenfalls aus dem Visual Viewport README, zeigt, wie diese API verwendet werden kann, um position: device-fixed zu simulieren, welches Elemente am visuellen Viewport fixiert. Ein Live-Beispiel ist ebenfalls verfügbar.

const bottomBar = document.getElementById("bottom-bar");
const viewport = window.visualViewport;
function viewportHandler() {
  const layoutViewport = document.getElementById("layoutViewport");

  // Since the bar is position: fixed we need to offset it by the visual
  // viewport's offset from the layout viewport origin.
  const offsetLeft = viewport.offsetLeft;
  const offsetTop =
    viewport.height -
    layoutViewport.getBoundingClientRect().height +
    viewport.offsetTop;

  // You could also do this by setting style.left and style.top if you
  // use width: 100% instead.
  bottomBar.style.transform = `translate(${offsetLeft}px, ${offsetTop}px) scale(${
    1 / viewport.scale
  })`;
}
window.visualViewport.addEventListener("scroll", viewportHandler);
window.visualViewport.addEventListener("resize", viewportHandler);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Web Viewports Explainer — Nützliche Erklärung von Web-Viewport-Konzepten, einschließlich des Unterschieds zwischen visuellem Viewport und Layout-Viewport.