Torus Kit Scrollbar

Customized CSS scrollbar style to make uniform cross-browser appearance. Available in dark, light and white variation.

Overview

Custom scrollbar component that working natively in Firefox and WebKit browsers. Created only with CSS styles and no JavaScript, so it doesn’t break default browser scroll behavior and keeps the code lightweight. Torus Kit scrollbar can be easily added into HTML element that make use of overflow auto or scroll. Depending on background color or overall appearance, choose from light, dark and white style variant.

Requirements
  • Element has to use overflow: auto or overflow: scroll CSS property. Check Overflow utility classes
  • Usually you have to define a height or max-height on element with .scrollbar. Check Height sizing utility classes
  • Don’t use directly on <body>. Create some wrapper element with overflow: auto; and height: 100vh; instead

Example

Custom dark scrollbar used in Bootstrap card component. Used together with .overflow-auto utility class and h-10rem Torus Kit custom height Sizing utility.

Dark scrollbar within Bootstrap card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sapien nulla. Vivamus placerat, nulla vel pulvinar cursus, diam nulla pellentesque ipsum, eu tincidunt quam metus eget risus. Donec vel augue hendrerit erat semper consequat nec non urna. Nulla cursus mauris ex, sit amet pellentesque magna volutpat a. Nam sollicitudin magna a mauris consectetur, id vestibulum ipsum viverra. Quisque quis mi ante.

Etiam et dolor facilisis, posuere mauris in, sodales arcu. Sed ac porttitor est, eu pulvinar turpis. Ut tempor sapien a mauris sodales, sed dictum lorem interdum. Quisque hendrerit sagittis elementum. Cras hendrerit non nulla eu imperdiet. Fusce semper nunc eget luctus gravida. Sed lacinia quam non sollicitudin venenatis. Aliquam non lectus lorem. Mauris ornare interdum sem, eget cursus dolor. Curabitur id tellus nec felis laoreet pharetra a sed mauris. Ut in mattis justo, a euismod quam. Fusce congue, odio sit amet accumsan vehicula, sem enim pellentesque massa, molestie imperdiet ipsum est vel nibh.

Scrollbar styles

Add .scrollbar class to the element you want to be scrolled and choose from three predefined .scrollbar-* styles that fits your design:

  • .scrollbar-light - gentle light scrollbar. Good for light backgrounds
  • .scrollbar-dark - dark, more visible scrollbar
  • .scrollbar-white - white scrollbar. Good for dark backgrounds

Light scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sapien nulla. Vivamus placerat, nulla vel pulvinar cursus, diam nulla pellentesque ipsum, eu tincidunt quam metus eget risus. Donec vel augue hendrerit erat semper consequat nec non urna. Nulla cursus mauris ex, sit amet pellentesque magna volutpat a. Nam sollicitudin magna a mauris consectetur, id vestibulum ipsum viverra. Quisque quis mi ante.

Dark scrollbar

Phasellus rutrum turpis et massa tempor aliquet. Aliquam commodo vehicula tincidunt. Quisque sollicitudin leo augue, vel mollis purus semper non. Nulla blandit egestas ex vel maximus. Mauris sit amet lacinia augue. Aliquam non mi at lorem dictum tristique. Pellentesque vestibulum, nisi vitae mollis aliquam, nunc leo interdum arcu, eu scelerisque nibh quam sed mi. Quisque dictum dolor vel dignissim vestibulum. Maecenas ut maximus est, ut fringilla quam. Curabitur nec scelerisque eros. Nullam et mi vel neque tempor ornare.

White scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sapien nulla. Vivamus placerat, nulla vel pulvinar cursus, diam nulla pellentesque ipsum, eu tincidunt quam metus eget risus. Donec vel augue hendrerit erat semper consequat nec non urna. Nulla cursus mauris ex, sit amet pellentesque magna volutpat a. Nam sollicitudin magna a mauris consectetur, id vestibulum ipsum viverra. Quisque quis mi ante.

<div class="scrollbar scrollbar-light overflow-auto">
  <h4>Light scrollbar</h4>
  <p>...</p>
</div>

<div class="scrollbar scrollbar-dark overflow-auto">
  <h4>Light scrollbar</h4>
  <p>...</p>
</div>

<div class="scrollbar scrollbar-white overflow-auto">
  <h4>Light scrollbar</h4>
  <p>...</p>
</div>

Scrollbar auto hide

Add .auto-hide class together with .scrollbar to make scrollbar automatically hide when the content is not hovered.

Light scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sapien nulla. Vivamus placerat, nulla vel pulvinar cursus, diam nulla pellentesque ipsum, eu tincidunt quam metus eget risus. Donec vel augue hendrerit erat semper consequat nec non urna. Nulla cursus mauris ex, sit amet pellentesque magna volutpat a. Nam sollicitudin magna a mauris consectetur, id vestibulum ipsum viverra. Quisque quis mi ante.

Dark scrollbar

Phasellus rutrum turpis et massa tempor aliquet. Aliquam commodo vehicula tincidunt. Quisque sollicitudin leo augue, vel mollis purus semper non. Nulla blandit egestas ex vel maximus. Mauris sit amet lacinia augue. Aliquam non mi at lorem dictum tristique. Pellentesque vestibulum, nisi vitae mollis aliquam, nunc leo interdum arcu, eu scelerisque nibh quam sed mi. Quisque dictum dolor vel dignissim vestibulum. Maecenas ut maximus est, ut fringilla quam. Curabitur nec scelerisque eros. Nullam et mi vel neque tempor ornare.

White scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sapien nulla. Vivamus placerat, nulla vel pulvinar cursus, diam nulla pellentesque ipsum, eu tincidunt quam metus eget risus. Donec vel augue hendrerit erat semper consequat nec non urna. Nulla cursus mauris ex, sit amet pellentesque magna volutpat a. Nam sollicitudin magna a mauris consectetur, id vestibulum ipsum viverra. Quisque quis mi ante.

<div class="scrollbar scrollbar-light auto-hide overflow-auto">
  <h4>Light scrollbar</h4>
  <p>...</p>
</div>

<div class="scrollbar scrollbar-dark auto-hide overflow-auto">
  <h4>Light scrollbar</h4>
  <p>...</p>
</div>

<div class="scrollbar scrollbar-white auto-hide overflow-auto">
  <h4>Light scrollbar</h4>
  <p>...</p>
</div>

Smooth scroll

Even that not all browsers supports CSS smooth scrolling with scroll-behavior: smooth, you can use the .smooth-scroll class on .scrollbar elements and enable browser-driven smooth scroll wherever possible.

Heading One

Phasellus rutrum turpis et massa tempor aliquet. Aliquam commodo vehicula tincidunt. Quisque sollicitudin leo augue, vel mollis purus semper non. Nulla blandit egestas ex vel maximus. Mauris sit amet lacinia augue. Aliquam non mi at lorem dictum tristique. Pellentesque vestibulum, nisi vitae mollis aliquam, nunc leo interdum arcu, eu scelerisque nibh quam sed mi. Quisque dictum dolor vel dignissim vestibulum. Maecenas ut maximus est, ut fringilla quam. Curabitur nec scelerisque eros. Nullam et mi vel neque tempor ornare.

Heading Two

Etiam et dolor facilisis, posuere mauris in, sodales arcu. Sed ac porttitor est, eu pulvinar turpis. Ut tempor sapien a mauris sodales, sed dictum lorem interdum. Quisque hendrerit sagittis elementum. Cras hendrerit non nulla eu imperdiet. Fusce semper nunc eget luctus gravida. Sed lacinia quam non sollicitudin venenatis. Aliquam non lectus lorem. Mauris ornare interdum sem, eget cursus dolor. Curabitur id tellus nec felis laoreet pharetra a sed mauris. Ut in mattis justo, a euismod quam. Fusce congue, odio sit amet accumsan vehicula, sem enim pellentesque massa, molestie imperdiet ipsum est vel nibh.

Heading Two

Quisque malesuada nulla neque, ac congue mi feugiat eget. Suspendisse eu ultrices velit. Proin ultrices eros sapien, ac semper erat maximus vitae. Nam condimentum lacus quam, a porta nulla mollis venenatis. Vestibulum ex libero, laoreet sit amet nunc eget, euismod vestibulum eros. Cras id odio in lectus dapibus malesuada. Mauris luctus dapibus est, sed auctor nisl dictum sed. Suspendisse ullamcorper metus et justo fringilla molestie. Maecenas hendrerit dui ut faucibus euismod. Praesent placerat sapien accumsan ipsum bibendum varius.

Suspendisse vitae odio sed ligula imperdiet eleifend ut ac justo. Duis quis leo a ligula pellentesque rutrum quis vitae turpis. Sed varius ipsum non erat porta lacinia. Donec tempor, mi eu posuere cursus, magna nunc bibendum neque, at dapibus risus nunc nec libero. Proin ac magna volutpat, tincidunt leo eu, viverra magna. Nunc pulvinar nibh eu tellus tristique dapibus. Nullam condimentum enim velit, quis eleifend nulla consequat ut. Donec vitae lacus eros. Proin finibus lectus ac erat efficitur, sed pharetra augue ultricies. Aliquam lacus urna, mollis at massa nec, ultrices tempus ante.

<nav class="nav flex-column">
  <a class="nav-link" href="#item-1">Item 1</a>
  <a class="nav-link" href="#item-2">Item 2</a>
  <a class="nav-link" href="#item-3">Item 3</a>
</nav>

<div class="h-20rem overflow-auto scrollbar scrollbar-dark smooth-scroll">
  <section id="item-1">...</section>
  <section id="item-2">...</section>
  <section id="item-3">...</section>
</div>