Scrollbar

A pure CSS component

Anatomy

The Scrollbar component can be configured to scroll vertically, horizontally, or in both directions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem. Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus.

<div class="scrollbar" style="width: 150px; height: 150px; overflow-y: auto; justify-content: start;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  <div class="scrollbar" style="width: 150px; overflow-x: auto; justify-content: start;">
                  <div style="min-width: 300px; display: inline-block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus.
                  </div>
                  </div>
                  <div class="scrollbar" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>

Modifier

Each scrollbar can be styled with modifiers.

You can mix as many modifiers on the same scrollbar, however you can choose only one choice per modifer

For convenience the default variant name is omited, meaning there is no need to add the default name class

Modifier	Option	Description
Variant	neutral (default), accent	Used for different types of actions
Color	base (default), brand, alert	Use any semantic colors
Size	md (default), sm, lg, xl	Modify the size of the scrollbar.

Variant

Set the variant of each scrollbar

Options: neutral(default), accent

<div class="scrollbar" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--accent" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>

Color

Set the color of each scrollbar

Options: base(default), brand, alert

<div class="scrollbar" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--brand" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--alert" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--accent" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--brand scrollbar--accent" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--alert scrollbar--accent" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>

Size

Set the size of each scrollbar

Options: md(default), sm, lg, xl

<div class="scrollbar scrollbar--sm" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--lg" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--xl" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>

Mix

Mix as many modifiers for each scrollbar

<div class="scrollbar scrollbar--sm scrollbar--alert scrollbar--accent" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>
                  <div class="scrollbar scrollbar--xl scrollbar--brand scrollbar--accent" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
                  <div style="min-width: 300px; min-height: 300px; display: block;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
                  suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
                  Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
                  rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
                  </div>
                  </div>

Templates

Scrollbar components is available in the followng templates

Corex template

Default corex templates. It provides the global, semantic and components tokens

CSS Tailwind Design Tokens
Modex template

Based on Corex default template, it adds dark and light mode option to the tokens

CSS Tailwind Design Tokens
Themex template

Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.

CSS Tailwind Design Tokens

Menu Switch