---
name: "up.viewport"
area: "API"
kind: "module"
parent: "API reference"
url: "https://unpoly.com/api/up.viewport"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [API reference](https://unpoly.com/api.md)</nav>

# `up.viewport`

Features to control scrolling and focus when fragments are updated.

The default viewport is the [document's scrolling element](https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement). Mark additional scrolling containers, like a pane that scrolls on its own, with [`[up-viewport]`](https://unpoly.com/api/up-viewport.md) so Unpoly can scroll them when revealing an element and save their scroll positions for history restoration. Elements fixed to the screen edge, like a sticky header, get [`[up-fixed=top]`](https://unpoly.com/api/up-fixed-top.md) so revealed content is not hidden behind them.

From JavaScript, [`up.reveal()`](https://unpoly.com/api/up.reveal.md) scrolls an element into view, and [`up.viewport.saveScroll()`](https://unpoly.com/api/up.viewport.saveScroll.md) and [`up.viewport.restoreScroll()`](https://unpoly.com/api/up.viewport.restoreScroll.md) save and restore scroll positions. Defaults like the reveal padding live in [`up.viewport.config`](https://unpoly.com/api/up.viewport.config.md).

<nav aria-label="Guides">

- [Learn: Scrolling & focus](https://unpoly.com/learn/scrolling-and-focus.md)

</nav>

---

## Features {#features}

- ### [[up-anchored=right]](https://unpoly.com/api/up-anchored-right.md) (HTML attribute)

  Marks this element as being anchored to the right edge of the screen, like a fixed navigation bar.

- ### [[up-fixed=bottom]](https://unpoly.com/api/up-fixed-bottom.md) (HTML attribute)

  Marks this element as being fixed to the bottom edge of the screen using `position: fixed`.

- ### [[up-fixed=top]](https://unpoly.com/api/up-fixed-top.md) (HTML attribute)

  Marks this element as being fixed to the top edge of the screen using `position: fixed`.

- ### [up.focus(element, [options])](https://unpoly.com/api/up.focus.md) (JavaScript function)

  Focuses the given element.

- ### [.up-focus-hidden](https://unpoly.com/api/up-focus-hidden.md) (CSS class) (experimental)

  This class is assigned to elements that were focused by Unpoly but should not have a visible focus ring.

- ### [.up-focus-visible](https://unpoly.com/api/up-focus-visible.md) (CSS class) (experimental)

  This class is assigned to elements that were focused by Unpoly and should have a visible focus ring.

- ### [up.reveal(element, [options])](https://unpoly.com/api/up.reveal.md) (JavaScript function)

  Scrolls the given element's viewport so the first rows of the element are visible for the user.

- ### [up.scroll(viewport, scrollPos, [options])](https://unpoly.com/api/up.scroll.md) (JavaScript function) (deprecated)

  Scrolls the given viewport to the given Y-position.

- ### [.up-scrollbar-away](https://unpoly.com/api/up-scrollbar-away.md) (CSS class) (experimental)

  This class is assigned to the `<body>` and right-anchored elements while an overlay with a scrolling viewport is open.

- ### [[up-viewport]](https://unpoly.com/api/up-viewport.md) (HTML attribute)

  Marks this element as a scrolling container ("viewport").

- ### [up.viewport.closest(target)](https://unpoly.com/api/up.viewport.closest.md) (JavaScript function) (deprecated)

  Returns the scrolling container for the given element.

- ### [up.viewport.config](https://unpoly.com/api/up.viewport.config.md) (Configuration object)

  Configures defaults for scrolling.

- ### [up.viewport.get(target)](https://unpoly.com/api/up.viewport.get.md) (JavaScript function)

  Returns the scrolling container for the given element.

- ### [up.viewport.restoreFocus([options])](https://unpoly.com/api/up.viewport.restoreFocus.md) (JavaScript function)

  Restores previously saved focus-related state.

- ### [up.viewport.restoreScroll([viewport], [options])](https://unpoly.com/api/up.viewport.restoreScroll.md) (JavaScript function)

  Restores previously saved scroll positions.

- ### [up.viewport.root](https://unpoly.com/api/up.viewport.root.md) (JavaScript property)

  Returns the scrolling element for the browser's main content area.

- ### [up.viewport.saveFocus([options])](https://unpoly.com/api/up.viewport.saveFocus.md) (JavaScript function)

  Saves focus-related state for later restoration.

- ### [up.viewport.saveScroll([viewport], [options])](https://unpoly.com/api/up.viewport.saveScroll.md) (JavaScript function)

  Saves scroll positions for later restoration.