View on Github
Custom scrollbars
Purpose
Custom scrollbar will override the default scrollbar style.
Custom scrollbar
Use the scrollbar-custom class.
Example HTML usage:
<!-- Custom scrollbar -->
<div class="scrollbar-custom p-3" style="height: 150px; overflow: auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique
ipsam voluptate, nihil dolorem nam quam ipsa ducimus, necessitatibus accusantium! Delectus ea corrupti culpa ut
exercitationem, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione,
tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus?
</p>
</div>Custom scrollbar small
For small custom scrollbar, use the
scrollbar-custom-sm with
scrollbar-custom class.
Example HTML usage:
<!-- Custom scrollbar -->
<div class="scrollbar-custom scrollbar-custom-sm p-3" style="height: 150px; overflow: auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique
ipsam voluptate, nihil dolorem nam quam ipsa ducimus, necessitatibus accusantium! Delectus ea corrupti culpa ut
exercitationem, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione,
tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus?
</p>
</div>Custom scrollbar variants
Custom scrollbar include their own variant classes for quickly changing the look and feel of a scrollbar.
Different custom scrollbar require the use of
.scrollbar-custom-* {primary, success, warning, info, secondary, danger, light, dark }.