Join us online - 19th of November
Save your spot

Interface VisualViewport

The VisualViewport interface of the CSSOM view 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 unique VisualViewport representing the properties associated with that window.

MDN Reference

interface VisualViewport {
    height: number;
    offsetLeft: number;
    offsetTop: number;
    onresize: ((this: VisualViewport, ev: Event) => any) | null;
    onscroll: ((this: VisualViewport, ev: Event) => any) | null;
    pageLeft: number;
    pageTop: number;
    scale: number;
    width: number;
    addEventListener<K extends keyof VisualViewportEventMap>(
        type: K,
        listener: (this: VisualViewport, ev: VisualViewportEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void;
    addEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void;
    dispatchEvent(event: Event): boolean;
    removeEventListener<K extends keyof VisualViewportEventMap>(
        type: K,
        listener: (this: VisualViewport, ev: VisualViewportEventMap[K]) => any,
        options?: boolean | EventListenerOptions,
    ): void;
    removeEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void;
}

Hierarchy

  • EventTarget
    • VisualViewport
Index
height offsetLeft offsetTop onresize onscroll pageLeft pageTop scale width
addEventListener dispatchEvent removeEventListener
height: number

The height read-only property of the VisualViewport interface returns the height of the visual viewport, in CSS pixels, or 0 if current document is not fully active.

MDN Reference

offsetLeft: number

The offsetLeft read-only property of the VisualViewport interface returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.

MDN Reference

offsetTop: number

The offsetTop read-only property of the VisualViewport interface returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.

MDN Reference

onresize: ((this: VisualViewport, ev: Event) => any) | null

MDN Reference

onscroll: ((this: VisualViewport, ev: Event) => any) | null

MDN Reference

pageLeft: number

The pageLeft read-only property of the VisualViewport interface returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.

MDN Reference

pageTop: number

The pageTop read-only property of the VisualViewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.

MDN Reference

scale: number

The scale read-only property of the VisualViewport interface returns the pinch-zoom scaling factor applied to the visual viewport, or 0 if current document is not fully active, or 1 if there is no output device.

MDN Reference

width: number

The width read-only property of the VisualViewport interface returns the width of the visual viewport, in CSS pixels, or 0 if current document is not fully active.

MDN Reference

  • The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

    MDN Reference

    Type Parameters

    Parameters

    Returns void

  • The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

    MDN Reference

    Parameters

    Returns void

  • The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

    MDN Reference

    Parameters

    • event: Event

    Returns boolean

  • The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

    MDN Reference

    Type Parameters

    Parameters

    Returns void

  • The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

    MDN Reference

    Parameters

    Returns void

Was this helpful?