scroll-into-view

Syntax

scroll-into-view: [true|false] [behaviour-auto|behaviour-smooth] [block-start|block-center|block-end|block-nearest] [inline-start|inline-center|inline-end|inline-nearest] [every (time)] [after (time)][, true...];

This command scrolls the target selector into view.

It uses the JavaScript scrollIntoView command, except it uses individual options to mimic the actions as it would if translated to CSS.

Note that behaviour-smooth doesn't work in all browsers. For cross-browser compatibility, additionally use the CSS property "scroll-behaviour" in your CSS.

To get a full description of the options and their behaviour, look at the page below:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Options

true = the same as writing "block-start inline-nearest".
false = the same as writing "block-end inline-nearest".

Below is the mapping equivalent to the JavaScript scrollIntoView action. Use the items in bold for your scroll-into-view command.

behaviour-auto = { behaviour: 'auto' } (default)
behaviour-smooth = { behaviour: 'smooth' } (This may or may not work in a specific browser - it depends on the browser.)
block-start = { block: 'start' } (default)
block-center = { block: 'center' }
block-end = { block: 'end' }
block-nearest = { block: 'nearest' }
inline-start = { inline: 'start' }
inline-center = { inline: 'center' }
inline-end = { inline: 'end' }
inline-nearest = { inline: 'nearest' } (default)

Example:

#myDiv:click {
    #anotherDiv {
        scroll-into-view: behaviour-smooth block-center;
    }
}