TheVisualViewport interface of theVisual Viewport API represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a uniqueVisualViewport representing the properties associated with that window.

You can get a window's visual viewport usingWindow.visualViewport.

Instance properties

Also inherits properties from its parent interface,EventTarget.

VisualViewport.offsetLeftRead only

Returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels.

VisualViewport.offsetTopRead only

Returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels.

VisualViewport.pageLeftRead only

Returns the x coordinate of the visual viewport relative to the initial containing block origin of the top edge in CSS pixels.

VisualViewport.pageTopRead only

Returns the y coordinate of the visual viewport relative to the initial containing block origin of the top edge in CSS pixels.

VisualViewport.widthRead only

Returns the width of the visual viewport in CSS pixels.

VisualViewport.heightRead only

Returns the height of the visual viewport in CSS pixels.

VisualViewport.scaleRead only

Returns the pinch-zoom scaling factor applied to the visual viewport.

Instance methods

Also inherits methods from its parent interface,EventTarget.

Events

Listen to these events usingaddEventListener() or by assigning an event listener to the relevantoneventname property of this interface.

resize

Fired when the visual viewport is resized.Also available via theonresize property.

scroll

Fired when the visual viewport is scrolled.Also available via theonscroll property.

scrollend

Fired when a scrolling operation on the visual viewport ends.Also available via theonscrollend property.

Examples

Hiding an overlaid box on zoom

This example, taken from theVisual Viewport README, shows how to write a bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. This is a nice way to improve the user experience when zooming in on pages. Alive sample is also available.

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);

Simulating position: device-fixed

This example, also taken from theVisual Viewport README, shows how to use this API to simulateposition: device-fixed, which fixes elements to the visual viewport. Alive sample is also available.

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);

Specifications

Browser compatibility

See also

• Web Viewports Explainer — useful explanation of web viewports concepts, including the difference between visual viewport and layout viewport.