monks/view_timeline_axis

The view-timeline-axis CSS property is used to specify the scrollbar direction that will be used to provide the timeline for a named view progress timeline animation, which is progressed through based on the change in visibility of an element (known as the subject) inside a scrollable element (scroller). view-timeline-axis is set on the subject. See CSS scroll-driven animations for more details.

If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created.

The view-timeline-axis, {{cssxref(“view-timeline-inset”)}} and {{cssxref(“view-timeline-name”)}} properties can also be set using the {{cssxref(“view-timeline”)}} shorthand property.

Values

block

</>

pub const block: #(String, String)

: The scrollbar on the block axis of the scroller element, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as y, while for vertical writing modes, it is the same as x. This is the default value.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

inline

</>

pub const inline: #(String, String)

: The scrollbar on the inline axis of the scroller element, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as x, while for vertical writing modes, this is the same as y.

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for view-timeline-axis

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for view-timeline-axis. It will be wrapped in var() and have -- prepended.

x

</>

pub const x: #(String, String)

: The scrollbar on the horizontal axis of the scroller element.

y

</>

pub const y: #(String, String)

: The scrollbar on the vertical axis of the scroller element.