Torus Kit Scrollbar PRO
Customized CSS scrollbar style to make uniform cross-browser appearance. Available in dark, light and white variation.
What's New
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: autooroverflow: scrollCSS property. Check Overflow utility classes - Usually you have to define a
heightormax-heighton 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>