VisualViewport
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.
Die VisualViewport
-Schnittstelle der Visual Viewport API repräsentiert das visuelle Viewport für ein gegebenes Fenster. Für eine Seite mit iframes hat jedes iframe sowie die enthaltende Seite ein einzigartiges Fensterobjekt. Jedes Fenster auf einer Seite hat ein einzigartiges VisualViewport
, das die mit diesem Fenster verbundenen Eigenschaften darstellt.
Sie können das visuelle Viewport eines Fensters mit Window.visualViewport
abrufen.
Hinweis: Nur das oberste Fenster hat ein visuelles Viewport, das sich vom Layout-Viewport unterscheidet. Daher ist im Allgemeinen nur das VisualViewport
-Objekt des obersten Fensters nützlich. Für ein <iframe>
entsprechen die metrischen Angaben des visuellen Viewports wie VisualViewport.width
immer den metrischen Angaben des Layout-Viewports wie document.documentElement.clientWidth
.
Instanz-Eigenschaften
Erbt auch Eigenschaften von seiner übergeordneten Schnittstelle, EventTarget
.
VisualViewport.offsetLeft
Nur lesbar-
Gibt den Versatz der linken Kante des visuellen Viewports von der linken Kante des Layout-Viewports in CSS-Pixeln zurück.
VisualViewport.offsetTop
Nur lesbar-
Gibt den Versatz der oberen Kante des visuellen Viewports von der oberen Kante des Layout-Viewports in CSS-Pixeln zurück.
VisualViewport.pageLeft
Nur lesbar-
Gibt die x-Koordinate des visuellen Viewports relativ zum Ursprung des initialen enthaltenden Blocks in CSS-Pixeln zurück.
VisualViewport.pageTop
Nur lesbar-
Gibt die y-Koordinate des visuellen Viewports relativ zum Ursprung des initialen enthaltenden Blocks in CSS-Pixeln zurück.
VisualViewport.width
Nur lesbar-
Gibt die Breite des visuellen Viewports in CSS-Pixeln zurück.
VisualViewport.height
Nur lesbar-
Gibt die Höhe des visuellen Viewports in CSS-Pixeln zurück.
VisualViewport.scale
Nur lesbar-
Gibt den Pinch-Zoom-Skalierungsfaktor zurück, der auf das visuelle Viewport angewendet wird.
Instanz-Methoden
Erbt auch Methoden von seiner übergeordneten Schnittstelle, EventTarget
.
Ereignisse
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.
Beispiele
Verstecken eines überlagerten Kastens beim Zoomen
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);
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);
Hinweis: Diese Technik sollte mit Vorsicht verwendet werden; das Nachahmen von position: device-fixed
auf diese Weise kann dazu führen, dass das fixierte Element beim Scrollen flackert.
Spezifikationen
Specification |
---|
CSSOM View Module # the-visualviewport-interface |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Web Viewports Erklärer — nützliche Erklärung von Web-Viewport-Konzepten, einschließlich des Unterschieds zwischen visuellem Viewport und Layout-Viewport.