up.viewport up.viewport.config

Configuration object

An array of CSS selectors that match viewports.

By default this contains the [up-viewport] attribute.

Matching elements must have a derivable target selector.

An array of CSS selectors that find elements fixed to the top edge of the screen (using position: fixed).

See [up-fixed="top"] for details.

An array of CSS selectors that match elements fixed to the bottom edge of the screen (using position: fixed).

See [up-fixed="bottom"] for details.

An array of CSS selectors that find elements anchored to the right edge of the screen (using right:0 with position: fixed or position: absolute).

See [up-anchored="right"] for details.

When revealing elements, Unpoly will scroll a viewport to the top when the revealed element is closer to the viewport's top edge than config.revealSnap.

Set to 0 to disable snapping.

The desired padding between a revealed element and the closest viewport edge (in pixels).

A number indicating how many top pixel rows of a tall element to reveal.

Defaults to 50% of the available window height.

You may set this to false to always reveal as much of the element as the viewport allows.

You may also pass a function that receives an argument { viewportRect, elementRect } and returns a maximum height in pixels. Each given rectangle has properties { top, right, bottom, left, width, height }.

Whether to always scroll a revealed element to the top.

By default Unpoly will scroll as little as possible to make the element visible.

Whether elements focused by Unpoly should have a visible focus ring.

By default the focus ring will be visible if either the user interacted with the keyboard or the focused element is a form field.

The value is a function that accepts an object with { element, inputDevice } properties and returns a boolean. The { element } property is the focused element. The { inputDevice } property is a string denoting the interaction's input device.

The default configuration is implemented like this:

up.viewport.config.autoFocusVisible = ({ element, inputDevice }) =>
  inputDevice === 'key' || up.form.isField(element)