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.

    Demo

    <style>
            #scrollbar{
                --smart-scroll-bar-thumb-background-active: #003366;
                --smart-scroll-bar-thumb-background-hover: #336699;
                --smart-scroll-bar-thumb-background: #6699cc;
            }
    </style>