monks/scrollbar_width

The scrollbar-width property allows the author to set the desired thickness of an element’s scrollbars when they are shown.

The purpose of the scrollbar-width is to optimize the space occupied by the scrollbar on a page or element; the purpose is not related to scrollbar aesthetics. The scrollbar-width predefined keyword values indicate to the user agent whether a normal or smaller scrollbar should be rendered. Avoid using none, as hiding a scrollbar negatively impacts accessibility.

For elements that are scrollable only via programmatic means and not by direct user interaction, use the {{cssxref(“overflow”)}} property with a value of hidden rather than scrollbar-width: none.

Values

auto_

</>

pub const auto_: #(String, String)

: The default scrollbar width for the platform.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

none

</>

pub const none: #(String, String)

: No scrollbar shown, however the element will still be scrollable.> [!NOTE]> User Agents must apply any scrollbar-width value set on the root element to the viewport.

raw

</>

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

Enter a raw string value for scrollbar-width

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

thin

</>

pub const thin: #(String, String)

: A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width.

unset

</>

pub const unset: #(String, String)

var

</>

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

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