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

# up.viewport.config

Configures defaults for scrolling.

---

## Value {#value}

### Layout {#value-layout}

#### [config.viewportSelectors] {#config.viewportSelectors}

(optional)

An array of CSS selectors that match viewports.

By default this contains the [`[up-viewport]`](https://unpoly.com/api/up-viewport.md) attribute.

Matching elements must have a [derivable target selector](https://unpoly.com/learn/target-derivation.md).

Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

#### [config.fixedTopSelectors] {#config.fixedTopSelectors}

(optional)

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

See [`[up-fixed="top"]`](https://unpoly.com/api/up-fixed-top.md) for details.

Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

#### [config.fixedBottomSelectors] {#config.fixedBottomSelectors}

(optional)

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

See [`[up-fixed="bottom"]`](https://unpoly.com/api/up-fixed-bottom.md) for details.

Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

#### [config.anchoredRightSelectors] {#config.anchoredRightSelectors}

(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"]`](https://unpoly.com/api/up-anchored-right.md) for details.

Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

### Scrolling {#value-scrolling}

#### [config.revealSnap] {#config.revealSnap}

(optional)

When [revealing](https://unpoly.com/api/up.reveal.md) 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.

Type: number

#### [config.revealPadding] {#config.revealPadding}

(optional)

The desired padding between a [revealed](https://unpoly.com/api/up.reveal.md) element and the closest [viewport](https://unpoly.com/api/up.viewport.md) edge (in pixels).

Type: number

#### [config.revealMax] (Experimental) {#config.revealMax}

(optional)

A number indicating how many top pixel rows of a tall element to [reveal](https://unpoly.com/api/up.reveal.md).

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 }`.

Type: number

#### [config.revealTop=false] {#config.revealTop}

(optional)

Whether to always scroll a [revealed](https://unpoly.com/api/up.reveal.md) element to the top.

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

Type: number

### Focus {#value-focus}

#### [config.autoFocusVisible] (Experimental) {#config.autoFocusVisible}

(optional)

Whether elements focused by Unpoly should have a [visible focus ring](https://unpoly.com/learn/focus-visibility.md).

By default the focus ring will be visible if either the user [interacted with the keyboard](https://unpoly.com/api/up.event.inputDevice.md) or the focused element is a [form field](https://unpoly.com/api/up.form.config.md#config.fieldSelectors).

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](https://unpoly.com/api/up.event.inputDevice.md).

The default configuration is implemented like this:

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

Type: Function([Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)): boolean