`up.viewport`

JavaScript namespace

Features to control scrolling and focus when fragments are updated.

The default viewport is the document's scrolling element. Mark additional scrolling containers, like a pane that scrolls on its own, with [up-viewport] 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] so revealed content is not hidden behind them.

From JavaScript, up.reveal() scrolls an element into view, and up.viewport.saveScroll() and up.viewport.restoreScroll() save and restore scroll positions. Defaults like the reveal padding live in up.viewport.config.

Learn: Scrolling & focus

Features

[up-anchored=right] ATTR

Marks this element as being anchored to the right edge of the screen, like a fixed navigation bar.
[up-fixed=bottom] ATTR

Marks this element as being fixed to the bottom edge of the screen using position: fixed.
[up-fixed=top] ATTR

Marks this element as being fixed to the top edge of the screen using position: fixed.
up.focus(element, [options]) JS

Focuses the given element.
.up-focus-hidden CSS experimental

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

This class is assigned to elements that were focused by Unpoly and should have a visible focus ring.
up.reveal(element, [options]) JS

Scrolls the given element's viewport so the first rows of the element are visible for the user.
up.scroll(viewport, scrollPos, [options]) JS deprecated

Scrolls the given viewport to the given Y-position.
.up-scrollbar-away CSS experimental

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

Marks this element as a scrolling container ("viewport").
up.viewport.closest(target) JS deprecated

Returns the scrolling container for the given element.
up.viewport.config CONFIG

Configures defaults for scrolling.
up.viewport.get(target) JS

Returns the scrolling container for the given element.
up.viewport.restoreFocus([options]) JS

Restores previously saved focus-related state.
up.viewport.restoreScroll([viewport], [options]) JS

Restores previously saved scroll positions.
up.viewport.root JS

Returns the scrolling element for the browser's main content area.
up.viewport.saveFocus([options]) JS

Saves focus-related state for later restoration.
up.viewport.saveScroll([viewport], [options]) JS

Saves scroll positions for later restoration.