Overview

A scroll bar is a numeric control used to select a numeric value from a range of values by moving a thumb along a track or by clicking on the track itself. It is typically used in conjucntion with the listbox and dropdown elements to allow scrolling through the items. The user can change the value by clicking in the tank area if it is set as an input element.

To initialize a scrollBar, the user has to include the following files to the head of the page:

  • smart.base.css - the CSS file containing the styles for element
  • smart.element.js - the base class
  • smart.button.js - this file contains the smart-repeat-button custom element. The buttons of Smart.ScrollBar are instances of smart-repeat-button.
  • smart.scrollbar.js - the JS file containing the element definition

The following code adds a scrollbar to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script>
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
</head>
<body>
    <smart-scroll-bar></smart-scroll-bar>
</body>
</html>

Demo

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

The scroll bar can be horizontal or vertical. This could be set via orientation property.

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

Demo

Behavior

Scrollbar's range is defined by min and max properties.

When scrollbar's button is pressed, the value is increased/decreased by value, defined in step property.

If the user press the left mouse button in the area between a scrollbar button and thumb the value is increased/decreased by the value of largeStep property.

 <smart-scroll-bar min="0" max="100" step="10" large-step="20"></smart-scroll-bar>

Demo

Styling

Smart.ScrollBar uses the following CSS variables for styling:

  • --smart-scroll-button-size: used to set the size of the scroll buttons. Default value is 16px.