Edit this page

up.viewport up.viewport.config
JavaScript property

Configures defaults for scrolling.

Value

[config.viewportSelectors] Array optional

An array of CSS selectors that match viewports.

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

Matching elements must have a derivable target selector.

[config.fixedTopSelectors] Array optional

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.

[config.fixedBottomSelectors] Array optional

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.

[config.anchoredRightSelectors] Array optional

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.

[config.revealSnap] number optional

When revealing elements, Unpoly will scroll an 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.

[config.revealPadding] number optional

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

[config.revealMax] number optional experimental

A number indicating how many top pixel rows of a high 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 pixel. Each given rectangle has properties { top, right, buttom, left, width, height }.

[config.revealTop=false] number optional

Whether to always scroll a revealing element to the top.

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

[config.autoFocusVisible] Function(Object): boolean optional experimental

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)