ScrollBar JAVASCRIPT UI Component API

ScrollBar Javascript API

Class

ScrollBar

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

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

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

Default value

"advanced"

Example

Set the animation property.

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

Set the animation property by using the HTML Element's instance.

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

 scrollbar.animation = 'simple';

Get the animation property.

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

 let animation = scrollbar.animation;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

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

 scrollbar.disabled = false;

Get the disabled property.

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

 let disabled = scrollbar.disabled;

largeStepinteger

Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.

Default value

100

Example

Set the largeStep property.

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

Set the largeStep property by using the HTML Element's instance.

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

 scrollbar.largeStep = 50;

Get the largeStep property.

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

 let largeStep = scrollbar.largeStep;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

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

Set the locale property by using the HTML Element's instance.

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

 scrollbar.locale = 'fr';

Get the locale property.

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

 let locale = scrollbar.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

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

Set the localizeFormatFunction property by using the HTML Element's instance.

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

 scrollbar.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = scrollbar.localizeFormatFunction;

maxinteger

Sets or gets the scrollbar's maximum value.

Default value

1000

Example

Set the max property.

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

Set the max property by using the HTML Element's instance.

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

 scrollbar.max = 500;

Get the max property.

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

 let max = scrollbar.max;

mechanicalAction"switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

Sets or gets the type of used mechanical action. The mechanical action defines in which moment the value of the element will be updated.

Default value

"switchWhileDragging"

Example

Set the mechanicalAction property.

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

Set the mechanicalAction property by using the HTML Element's instance.

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

 scrollbar.mechanicalAction = 'switchWhileDragging';

Get the mechanicalAction property.

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

 let mechanicalAction = scrollbar.mechanicalAction;

messagesobject

Sets an object with string values, related to the different states of passwords strength.

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."

}

Example

Set the messages property.

 <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>

Set the messages property by using the HTML Element's instance.

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

 scrollbar.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."}};

Get the messages property.

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

 let messages = scrollbar.messages;

mininteger

Sets or gets the scrollbar's minimum value.

Default value

Example

Set the min property.

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

Set the min property by using the HTML Element's instance.

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

 scrollbar.min = 100;

Get the min property.

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

 let min = scrollbar.min;

orientation"horizontal" | "vertical"

Sets or gets the scrollbar's orientation

Default value

"horizontal"

Example

Set the orientation property.

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

Set the orientation property by using the HTML Element's instance.

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

 scrollbar.orientation = 'horizontal';

Get the orientation property.

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

 let orientation = scrollbar.orientation;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

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

 scrollbar.readonly = true;

Get the readonly property.

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

 let readonly = scrollbar.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

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

Set the rightToLeft property by using the HTML Element's instance.

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

 scrollbar.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = scrollbar.rightToLeft;

showButtonsboolean

Sets or gets scrollbar buttons visibility.

Default value

true

Example

Set the showButtons property.

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

Set the showButtons property by using the HTML Element's instance.

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

 scrollbar.showButtons = true;

Get the showButtons property.

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

 let showButtons = scrollbar.showButtons;

stepinteger

Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.

Default value

Example

Set the step property.

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

Set the step property by using the HTML Element's instance.

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

 scrollbar.step = 20;

Get the step property.

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

 let step = scrollbar.step;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

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

Set the theme property by using the HTML Element's instance.

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

 scrollbar.theme = 'red';

Get the theme property.

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

 let theme = scrollbar.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

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

 scrollbar.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = scrollbar.unfocusable;

valuenumber

Sets or gets the widget's value.

Default value

Example

Set the value property.

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

Set the value property by using the HTML Element's instance.

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

 scrollbar.value = 100;

Get the value property.

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

 let value = scrollbar.value;

Events

changeCustomEvent

This event is triggered when the value is changed.

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.

Example

Set up the event handler of change event.

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

	// event handling code goes here.
})

Methods

refresh(): void

Redraws the element.

Invoke the refresh method.

const scrollbar = document.querySelector('smart-scroll-bar');
scrollbar.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.