VisualViewport

Erbt auch Eigenschaften von seiner übergeordneten Schnittstelle, 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 initialen enthaltenden Blocks in CSS-Pixeln zurück.

VisualViewport.pageTop Schreibgeschützt

Gibt die y-Koordinate des visuellen Viewports relativ zum Ursprung des initialen enthaltenden Blocks 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 Pinch-Zoom-Skalierungsfaktor zurück, der auf das visuelle Viewport angewendet wird.

Erbt auch Methoden von seiner übergeordneten Schnittstelle, EventTarget.

Hören Sie auf diese Ereignisse mit addEventListener() oder durch Zuweisen eines Ereignislisteners zur relevanten oneventname-Eigenschaft dieser Schnittstelle.

resize

Wird ausgelöst, wenn das visuelle Viewport geändert wird. Ebenfalls verfügbar über die onresize-Eigenschaft.

scroll

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

scrollend

Wird ausgelöst, wenn eine Scroll-Operation auf dem visuellen Viewport endet. Ebenfalls verfügbar über die onscrollend-Eigenschaft.

Dieses Beispiel, übernommen aus dem Visual Viewport README, zeigt, wie man etwas Code schreiben kann, der einen überlagerten Kasten (der beispielsweise eine Werbung enthalten könnte) ausblendet, wenn der Benutzer hineinzoomt. Dies ist eine gute 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, 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);

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