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
oroverflow: scroll
CSS property. Check Overflow utility classes - Usually you have to define a
height
ormax-height
on element with.scrollbar
. Check Height sizing utility classes - Don’t use directly on
<body>
. Create some wrapper element withoverflow: auto;
andheight: 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
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
<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.
<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.
<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>