0.0.3

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

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

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

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

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

Menu Switch