VisualViewport

Erbt auch Eigenschaften von seiner Elternschnittstelle, EventTarget.

VisualViewport.offsetLeft Nur lesbar

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

VisualViewport.offsetTop Nur lesbar

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

VisualViewport.pageLeft Nur lesbar

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

VisualViewport.pageTop Nur lesbar

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

VisualViewport.width Nur lesbar

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

VisualViewport.height Nur lesbar

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

VisualViewport.scale Nur lesbar

Gibt den Pinch-Zoom-Skalierungsfaktor zurück, der auf den visuellen Viewport angewendet wird.

Erbt auch Methoden von seiner Elternschnittstelle, EventTarget.

Diese Ereignisse können mit addEventListener() abgehört werden oder indem ein Ereignislistener der relevanten oneventname-Eigenschaft dieser Schnittstelle zugewiesen wird.

resize

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

scroll

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

scrollend

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

Dieses Beispiel, entnommen aus dem Visual Viewport README, zeigt, wie Sie einen einfachen Code schreiben, der ein überlagertes Feld ausblendet (das beispielsweise eine Werbung enthalten könnte), wenn der Benutzer hereinzoomt. Dies ist eine nette 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);

Dieses Beispiel, ebenfalls aus dem Visual Viewport README entnommen, zeigt, wie Sie diese API verwenden, um position: device-fixed zu simulieren, das 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);

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