Configures defaults for scrolling.
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 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.
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 }
.
Whether to always scroll a revealing 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)