Build your web apps using Smart UI
Scroll Bar - CSS API Reference
All Common CSS variables:
Specific CSS variables for Scroll Bar styling:
- --smart-scroll-button-size: ScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated defaultd on this value.
- --smart-scroll-bar-default-width - ScrollBar's default width.
- --smart-scroll-bar-default-height - ScrollBar's default height.
- --smart-scroll-bar-background: Default ScrollBar's background color.
- --smart-scroll-bar-thumb-border-top-right-radius: Default ScrollBar's top-right border radius.
- --smart-scroll-bar-thumb-border-top-left-radius: Default ScrollBar's top-left border radius.
- --smart-scroll-bar-thumb-border-bottom-left-radius: Default ScrollBar's bottom-left border radius.
- --smart-scroll-bar-thumb-border-bottom-right-radius: Default ScrollBar's bottom-right border radius.
- --smart-scroll-bar-thumb-background: The color of the ScrollBar's thumb.
- --smart-scroll-bar-thumb-border: The color of the ScrollBar's thumb border.
- --smart-scroll-bar-thumb-background-hover: The background color of the ScrollBar's thumb in hover state.
- --smart-scroll-bar-thumb-border-hover: The border color of the ScrollBar's thumb in hover state.
- --smart-scroll-bar-thumb-background-active: The background color of the ScrollBar's thumb in active state.
- --smart-scroll-bar-thumb-border-active: The border color of the ScrollBar's thumb in active state.
- --smart-scroll-bar-button-background: The background color of ScrollBar's navigation buttons.
- --smart-scroll-bar-button-border: The border color of ScrollBar's navigation buttons.
- --smart-scroll-bar-button-color: The color of ScrollBar's navigation buttons.
- --smart-scroll-bar-button-background-hover: The background color of the hovered ScrollBar's buttons.
- --smart-scroll-bar-button-border-hover: The border color of the hovered ScrollBar's buttons.
- --smart-scroll-bar-button-color-hover: The color of the hovered ScrollBar's buttons.
- --smart-scroll-bar-button-background-active: The background color of the ScrollBar's buttons in active state.
- --smart-scroll-bar-button-border-active: The border color of the ScrollBar's buttons in active state.
- --smart-scroll-bar-button-color-active: The color of the ScrollBar's buttons in active state.
The following CSS selectors can be used to style Scroll Bar:
-
smart-scroll-bar - the element itself. Can be used to set width and height for the whole element.
-
.smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
-
.smart-scroll-button - a smartRepeatButton custom element used to increase scrolling. Can be styled like any other smartRepeatButton element.
- .smart-arrow - a DIV element used for the arrow indicator inside the button.
-
.smart-track - a DIV element used for the scroll track.
- .smart-thumb - a DIV element used for the thumb of the track.
-
.smart-scroll-button - a smartRepeatButton custom element used to decrease scrolling. Can be styled like any other smartRepeatButton element.
- .smart-arrow - a DIV element used for the arrow indicator inside the button.
-
.smart-scroll-button - a smartRepeatButton custom element used to increase scrolling. Can be styled like any other smartRepeatButton element.
-
.smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
Demo
<style>
#scrollbar{
--smart-scroll-bar-thumb-background-active: #003366;
--smart-scroll-bar-thumb-background-hover: #336699;
--smart-scroll-bar-thumb-background: #6699cc;
}
</style>