ScrollBar — Smart UI JavaScript API

ScrollBar — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ScrollBar - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-scroll-bar id="demo-scrollbar"></smart-scroll-bar>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.scrollbar.js';

    const el = document.getElementById('demo-scrollbar');
    if (el) {

      el.orientation = 'horizontal';
      el.min = 0;
      el.max = 100;
      el.value = 25;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: ScrollBar   Framework: JavaScript   Selector: smart-scroll-bar

API counts: 18 properties, 1 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: refresh()

Common events: change

Module hint: smart-webcomponents/source/modules/smart.scrollbar.js

Scrollbar is a replacement of the default scroll bar with multiple UI Styling options.

Class

ScrollBar

ScrollBar

Scrollbar is a replacement of the default scroll bar with multiple UI Styling options.

Selector

smart-scroll-bar

Quick picks

changedisabledrefreshvalue

Properties

AanimationSpecifies the current animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' disables all animations; other values will enable and determine the type of animation applied.
DdisabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element as intended. When disabled, the element becomes unresponsive to user input and typically appears visually distinct to indicate its inactive state.
LlargeStepDefines or retrieves the value of the scrollbar's large step increment. This large step value determines how much the scrollbar's position changes when the user clicks in the track area between the scrollbar's thumb (slider) and one of its arrow buttons. When the left mouse button is pressed in this area, the scrollbar advances or retreats by the specified large step amount, enabling quicker navigation through the content compared to single-step arrow button clicks.
LlocaleSpecifies or retrieves the current language setting. This property determines which language is used for displaying messages, working in conjunction with the messages property to select the appropriate set of localized text based on the specified language code (e.g., "en", "fr", "es").
LlocalizeFormatFunctionInvokes a callback function associated with the localization module, typically used to handle events or actions such as language changes, text translations, or updates to localized content within the application.
MmaxSpecifies or retrieves the maximum scrollable value of the scrollbar, determining the highest position to which the scrollbar thumb can be moved. This value defines the upper limit of the scrollable content range.
MmechanicalActionSpecifies or retrieves the type of mechanical action applied to the element. Mechanical action determines the exact moment when the element's value is updated—such as immediately upon interaction, after a confirmation (like releasing a button), or according to specific user actions. This property allows you to control how and when changes to the element’s value are registered and processed within the application.
MmessagesDefines an object containing string values that represent the various states of password strength (e.g., weak, medium, strong). Each key in the object corresponds to a specific strength level, allowing for customized messages or labels based on the user's password strength status.
MminDefines or retrieves the lowest possible value that the scrollbar can represent, determining the starting point of the scrollbar's range.
OorientationSpecifies or retrieves the orientation of the scrollbar, determining whether it is displayed horizontally or vertically.
RreadonlyIf the element has the readonly attribute, users will be able to see its value but will not be able to modify, edit, or otherwise interact with its contents through input actions. However, the element may still be focusable and its value can be changed programmatically using scripts.
RrightToLeftSets or retrieves a value that specifies whether the element's content alignment is optimized for languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. When enabled, the element's layout, text direction, and associated styles are adjusted to properly support RTL locales.
SshowButtonsControls the visibility of scrollbar buttons. When set, this property determines whether the scrollbar's increment and decrement buttons (commonly arrow buttons at the ends of the scrollbar) are shown or hidden. It can be used to either display or hide these buttons programmatically, and can also be queried to retrieve the current visibility state.
SstepDefines or retrieves the increment by which the scrollbar's value changes when a user clicks on the scrollbar's arrow (stepper) buttons. This value determines how much the scroll position increases or decreases with each button press, allowing for precise control over scrolling granularity.
TthemeSpecifies the theme to be applied to the element. The selected theme controls the visual appearance, including colors, typography, and overall styling, ensuring a consistent and cohesive look for the element within the user interface.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatically using focus methods.
UunlockKeyGets or sets the 'unlockKey' property, which is a unique key used to activate or unlock access to the product’s features or functionality.
VvalueSets a new value for the widget or retrieves its current value, depending on how the method is invoked. This allows you to programmatically update the widget's data or access its existing data as needed.

Events

CchangeThis event is triggered whenever the value of the associated element is modified by the user or programmatically. It occurs immediately after the value has changed, allowing you to perform custom actions in response to the update.

Methods

RrefreshRe-renders the element by updating its visual presentation on the screen, ensuring that any recent changes to its properties, styles, or content are accurately reflected in the user interface.

Properties

animationSpecifies the current animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' disables all animations; other values will enable and determine the type of animation applied."none" | "simple" | "advanced"

Specifies the current animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' disables all animations; other values will enable and determine the type of animation applied.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-scroll-bar animation="none"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const animation = el.animation;

disabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element as intended. When disabled, the element becomes unresponsive to user input and typically appears visually distinct to indicate its inactive state.boolean

Determines whether the element is interactive or inactive. When enabled, users can interact with the element as intended. When disabled, the element becomes unresponsive to user input and typically appears visually distinct to indicate its inactive state.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-scroll-bar disabled></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const disabled = el.disabled;

largeStepDefines or retrieves the value of the scrollbar's large step increment. This large step value determines how much the scrollbar's position changes when the user clicks in the track area between the scrollbar's thumb (slider) and one of its arrow buttons. When the left mouse button is pressed in this area, the scrollbar advances or retreats by the specified large step amount, enabling quicker navigation through the content compared to single-step arrow button clicks.integer

Defines or retrieves the value of the scrollbar's large step increment. This large step value determines how much the scrollbar's position changes when the user clicks in the track area between the scrollbar's thumb (slider) and one of its arrow buttons. When the left mouse button is pressed in this area, the scrollbar advances or retreats by the specified large step amount, enabling quicker navigation through the content compared to single-step arrow button clicks.

Default value

100

Examples

Markup and runtime examples for largeStep:

HTML:

<smart-scroll-bar large-step="20"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.largeStep = 50;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const largeStep = el.largeStep;

localeSpecifies or retrieves the current language setting. This property determines which language is used for displaying messages, working in conjunction with the messages property to select the appropriate set of localized text based on the specified language code (e.g., "en", "fr", "es").string

Specifies or retrieves the current language setting. This property determines which language is used for displaying messages, working in conjunction with the messages property to select the appropriate set of localized text based on the specified language code (e.g., "en", "fr", "es").

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-scroll-bar locale="de"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const locale = el.locale;

localizeFormatFunctionInvokes a callback function associated with the localization module, typically used to handle events or actions such as language changes, text translations, or updates to localized content within the application.function | null

Invokes a callback function associated with the localization module, typically used to handle events or actions such as language changes, text translations, or updates to localized content within the application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-scroll-bar localize-format-function="function(){return '...'}"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const localizeFormatFunction = el.localizeFormatFunction;

maxSpecifies or retrieves the maximum scrollable value of the scrollbar, determining the highest position to which the scrollbar thumb can be moved. This value defines the upper limit of the scrollable content range.integer

Specifies or retrieves the maximum scrollable value of the scrollbar, determining the highest position to which the scrollbar thumb can be moved. This value defines the upper limit of the scrollable content range.

Default value

1000
Try a demo showcasing the max property.

Examples

Markup and runtime examples for max:

HTML:

<smart-scroll-bar max="200"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.max = 500;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const max = el.max;

mechanicalActionSpecifies or retrieves the type of mechanical action applied to the element. Mechanical action determines the exact moment when the element's value is updated—such as immediately upon interaction, after a confirmation (like releasing a button), or according to specific user actions. This property allows you to control how and when changes to the element’s value are registered and processed within the application."switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

Specifies or retrieves the type of mechanical action applied to the element. Mechanical action determines the exact moment when the element's value is updated—such as immediately upon interaction, after a confirmation (like releasing a button), or according to specific user actions. This property allows you to control how and when changes to the element’s value are registered and processed within the application.

Default value

"switchWhileDragging"

Examples

Markup and runtime examples for mechanicalAction:

HTML:

<smart-scroll-bar mechanical-action="switchWhenReleased"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.mechanicalAction = "switchWhileDragging";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const mechanicalAction = el.mechanicalAction;

messagesDefines an object containing string values that represent the various states of password strength (e.g., weak, medium, strong). Each key in the object corresponds to a specific strength level, allowing for customized messages or labels based on the user's password strength status.object

Defines an object containing string values that represent the various states of password strength (e.g., weak, medium, strong). Each key in the object corresponds to a specific strength level, allowing for customized messages or labels based on the user's password strength status.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-scroll-bar messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const messages = el.messages;

minDefines or retrieves the lowest possible value that the scrollbar can represent, determining the starting point of the scrollbar's range.integer

Defines or retrieves the lowest possible value that the scrollbar can represent, determining the starting point of the scrollbar's range.

Default value

0

Examples

Markup and runtime examples for min:

HTML:

<smart-scroll-bar min="10"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.min = 100;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const min = el.min;

orientationSpecifies or retrieves the orientation of the scrollbar, determining whether it is displayed horizontally or vertically."horizontal" | "vertical"

Specifies or retrieves the orientation of the scrollbar, determining whether it is displayed horizontally or vertically.

Default value

"horizontal"

Examples

Markup and runtime examples for orientation:

HTML:

<smart-scroll-bar orientation="vertical"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.orientation = "horizontal";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const orientation = el.orientation;

readonlyIf the element has the readonly attribute, users will be able to see its value but will not be able to modify, edit, or otherwise interact with its contents through input actions. However, the element may still be focusable and its value can be changed programmatically using scripts.boolean

If the element has the readonly attribute, users will be able to see its value but will not be able to modify, edit, or otherwise interact with its contents through input actions. However, the element may still be focusable and its value can be changed programmatically using scripts.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-scroll-bar readonly></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.readonly = true;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const readonly = el.readonly;

rightToLeftSets or retrieves a value that specifies whether the element's content alignment is optimized for languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. When enabled, the element's layout, text direction, and associated styles are adjusted to properly support RTL locales.boolean

Sets or retrieves a value that specifies whether the element's content alignment is optimized for languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. When enabled, the element's layout, text direction, and associated styles are adjusted to properly support RTL locales.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-scroll-bar right-to-left></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const rightToLeft = el.rightToLeft;

showButtonsControls the visibility of scrollbar buttons. When set, this property determines whether the scrollbar's increment and decrement buttons (commonly arrow buttons at the ends of the scrollbar) are shown or hidden. It can be used to either display or hide these buttons programmatically, and can also be queried to retrieve the current visibility state.boolean

Controls the visibility of scrollbar buttons. When set, this property determines whether the scrollbar's increment and decrement buttons (commonly arrow buttons at the ends of the scrollbar) are shown or hidden. It can be used to either display or hide these buttons programmatically, and can also be queried to retrieve the current visibility state.

Default value

true

Examples

Markup and runtime examples for showButtons:

HTML attribute:

<smart-scroll-bar show-buttons></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.showButtons = true;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const showButtons = el.showButtons;

stepDefines or retrieves the increment by which the scrollbar's value changes when a user clicks on the scrollbar's arrow (stepper) buttons. This value determines how much the scroll position increases or decreases with each button press, allowing for precise control over scrolling granularity.integer

Defines or retrieves the increment by which the scrollbar's value changes when a user clicks on the scrollbar's arrow (stepper) buttons. This value determines how much the scroll position increases or decreases with each button press, allowing for precise control over scrolling granularity.

Default value

10

Examples

Markup and runtime examples for step:

HTML:

<smart-scroll-bar step="15"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.step = 20;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const step = el.step;

themeSpecifies the theme to be applied to the element. The selected theme controls the visual appearance, including colors, typography, and overall styling, ensuring a consistent and cohesive look for the element within the user interface.string

Specifies the theme to be applied to the element. The selected theme controls the visual appearance, including colors, typography, and overall styling, ensuring a consistent and cohesive look for the element within the user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-scroll-bar theme="blue"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const theme = el.theme;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatically using focus methods.boolean

When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatically using focus methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-scroll-bar unfocusable></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const unfocusable = el.unfocusable;

unlockKeyGets or sets the 'unlockKey' property, which is a unique key used to activate or unlock access to the product’s features or functionality.string

Gets or sets the 'unlockKey' property, which is a unique key used to activate or unlock access to the product’s features or functionality.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-scroll-bar unlock-key=""></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const unlockKey = el.unlockKey;

valueSets a new value for the widget or retrieves its current value, depending on how the method is invoked. This allows you to programmatically update the widget's data or access its existing data as needed.number

Sets a new value for the widget or retrieves its current value, depending on how the method is invoked. This allows you to programmatically update the widget's data or access its existing data as needed.

Default value

0
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-scroll-bar value="10"></smart-scroll-bar>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-scroll-bar');
el.value = 100;

Read the current value:

const el = document.querySelector('smart-scroll-bar');
const value = el.value;

Events

changeThis event is triggered whenever the value of the associated element is modified by the user or programmatically. It occurs immediately after the value has changed, allowing you to perform custom actions in response to the update.CustomEvent

This event is triggered whenever the value of the associated element is modified by the user or programmatically. It occurs immediately after the value has changed, allowing you to perform custom actions in response to the update.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.value - A numeric value indicating the scroll position.
ev.detail.oldValue - A numeric value indicating the previous scroll position.
ev.detail.min - A numeric value indicating the min scroll position.
ev.detail.max - A numeric value indicating the max scroll position.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-scroll-bar')?.addEventListener('change', (event) => {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        min = detail.min,
        max = detail.max;

	// event handling code goes here.
})

Methods

refresh(): voidRe-renders the element by updating its visual presentation on the screen, ensuring that any recent changes to its properties, styles, or content are accurately reflected in the user interface.

Re-renders the element by updating its visual presentation on the screen, ensuring that any recent changes to its properties, styles, or content are accurately reflected in the user interface.

On the custom element in the DOM (narrow the selector, e.g. to #my-scrollbar, if you host multiple widgets):

document.querySelector('smart-scroll-bar')?.refresh();

CSS Variables

--smart-scroll-button-sizevar()

Default value

"16px"

smartScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated defaultd on this value.

--smart-scroll-bar-sizevar()

Default value

"18px"

Default scrollbar size

--smart-scroll-bar-default-widthvar()

Default value

"var(--smart-editor-width)"

ScrollBar's default width.

--smart-scroll-bar-default-heightvar()

Default value

"var(--smart-scroll-bar-size)"

ScrollBar's default height.

--smart-scroll-bar-backgroundvar()

Default value

"#F1F1F1"

Default ScrollBar's background color.

--smart-scroll-bar-bordervar()

Default value

"#F1F1F1"

The border color of the ScrollBar

--smart-scroll-bar-thumb-border-top-right-radiusvar()

Default value

"0px"

Default ScrollBar's top-right border radius.

--smart-scroll-bar-thumb-border-top-left-radiusvar()

Default value

"0px"

Default ScrollBar's top-left border radius.

--smart-scroll-bar-thumb-border-bottom-left-radiusvar()

Default value

"0px"

Default ScrollBar's bottom-left border radius.

--smart-scroll-bar-thumb-border-bottom-right-radiusvar()

Default value

"0px"

Default ScrollBar's bottom-right border radius.

--smart-scroll-bar-thumb-backgroundvar()

Default value

"#C1C1C1"

The color of the ScrollBar's thumb.

--smart-scroll-bar-thumb-bordervar()

Default value

"#C1C1C1"

The color of the ScrollBar's thumb border.

--smart-scroll-bar-thumb-background-hovervar()

Default value

"#A8A8A8"

The background color of the ScrollBar's thumb in hover state.

--smart-scroll-bar-thumb-border-hovervar()

Default value

"#A8A8A8"

The border color of the ScrollBar's thumb in hover state.

--smart-scroll-bar-thumb-background-activevar()

Default value

"#787878"

The background color of the ScrollBar's thumb in active state.

--smart-scroll-bar-thumb-border-activevar()

Default value

"#787878"

The border color of the ScrollBar's thumb in active state.

--smart-scroll-bar-button-backgroundvar()

Default value

"#F1F1F1"

The background color of ScrollBar's navigation buttons.

--smart-scroll-bar-button-bordervar()

Default value

"#F1F1F1"

The border color of ScrollBar's navigation buttons.

--smart-scroll-bar-button-colorvar()

Default value

"#505050"

The color of ScrollBar's navigation buttons.

--smart-scroll-bar-button-background-hovervar()

Default value

"#D2D2D2"

The background color of the hovered ScrollBar's buttons.

--smart-scroll-bar-button-border-hovervar()

Default value

"#F1F1F1"

The border color of the hovered ScrollBar's buttons.

--smart-scroll-bar-button-color-hovervar()

Default value

"#505050"

The color of the hovered ScrollBar's buttons.

--smart-scroll-bar-button-background-activevar()

Default value

"#787878"

The background color of the ScrollBar's buttons in active state.

--smart-scroll-bar-button-border-activevar()

Default value

"#F1F1F1"

The border color of the ScrollBar's buttons in active state.

--smart-scroll-bar-button-color-activevar()

Default value

"#fff"

The color of the ScrollBar's buttons in active state.