Scrollbars

Utilities for setting the style of the scrollbar


Class reference

ClassProperties
scrollbar-lightLight version
scrollbar-darkDark version

By default Elements CSS styles the scrollbar the same as .scrollbar-light, however you can change the scrollbar color using the .scrollbar-{color} utility classes.

.scrollbar-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu mauris in risus facilisis fringilla a vel mauris. Aliquam suscipit, sem quis bibendum varius, tortor nibh tincidunt metus, vitae semper velit nunc efficitur velit. Sed vitae sollicitudin nisi. Duis dui sapien, commodo non justo nec, porttitor dictum nisi. Mauris magna quam, aliquam ac interdum vel, feugiat in ex. Donec ac lectus mattis, molestie tellus nec, tincidunt lacus. Sed tempor luctus gravida. Suspendisse id varius dui, quis tempor leo. Ut gravida, libero vitae placerat faucibus, urna neque ultrices libero, quis ultricies nisi justo vel nisi. Cras ligula metus, efficitur nec scelerisque a, bibendum nec urna. Vestibulum id felis cursus, ultrices tortor in, viverra magna. Etiam tellus quam, tempor molestie dapibus in, dictum eget ligula. Sed sapien massa, eleifend et dolor at, mattis elementum velit. Aliquam mollis ac tellus eu sodales. Nam scelerisque libero at ullamcorper dapibus. Nullam porta, sem sit amet tincidunt pellentesque, ipsum ex mollis sapien, vitae posuere metus elit eget ipsum.

`

Curabitur magna quam, faucibus vel mi imperdiet, semper porttitor quam. Sed egestas risus nunc. Pellentesque neque magna, mollis sed consectetur nec, interdum at elit. Nullam nec elit ac sapien dictum tincidunt id ultrices lectus. Quisque gravida cursus lorem vitae fermentum. Donec blandit iaculis tempor. Praesent vel velit blandit metus vulputate auctor. Aliquam sodales lectus nulla, scelerisque interdum ex pretium convallis. Nunc commodo tellus orci, sit amet sollicitudin leo malesuada eu. Proin porttitor arcu et ligula posuere, eu feugiat erat imperdiet. Vivamus ac augue a nibh efficitur gravida sit amet sed eros. Quisque velit nulla, consequat sed pulvinar non, congue ut ante. Phasellus vehicula interdum leo, eget suscipit urna tincidunt ac. Praesent pharetra dolor nisi, ut accumsan augue condimentum in. Maecenas malesuada, dolor aliquam tincidunt eleifend, nibh tellus euismod quam, et convallis mauris dui eget orci. Maecenas at ante sed dui tempor fringilla vel maximus purus.

.scrollbar-dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu mauris in risus facilisis fringilla a vel mauris. Aliquam suscipit, sem quis bibendum varius, tortor nibh tincidunt metus, vitae semper velit nunc efficitur velit. Sed vitae sollicitudin nisi. Duis dui sapien, commodo non justo nec, porttitor dictum nisi. Mauris magna quam, aliquam ac interdum vel, feugiat in ex. Donec ac lectus mattis, molestie tellus nec, tincidunt lacus. Sed tempor luctus gravida. Suspendisse id varius dui, quis tempor leo. Ut gravida, libero vitae placerat faucibus, urna neque ultrices libero, quis ultricies nisi justo vel nisi. Cras ligula metus, efficitur nec scelerisque a, bibendum nec urna. Vestibulum id felis cursus, ultrices tortor in, viverra magna. Etiam tellus quam, tempor molestie dapibus in, dictum eget ligula. Sed sapien massa, eleifend et dolor at, mattis elementum velit. Aliquam mollis ac tellus eu sodales. Nam scelerisque libero at ullamcorper dapibus. Nullam porta, sem sit amet tincidunt pellentesque, ipsum ex mollis sapien, vitae posuere metus elit eget ipsum.

`

Curabitur magna quam, faucibus vel mi imperdiet, semper porttitor quam. Sed egestas risus nunc. Pellentesque neque magna, mollis sed consectetur nec, interdum at elit. Nullam nec elit ac sapien dictum tincidunt id ultrices lectus. Quisque gravida cursus lorem vitae fermentum. Donec blandit iaculis tempor. Praesent vel velit blandit metus vulputate auctor. Aliquam sodales lectus nulla, scelerisque interdum ex pretium convallis. Nunc commodo tellus orci, sit amet sollicitudin leo malesuada eu. Proin porttitor arcu et ligula posuere, eu feugiat erat imperdiet. Vivamus ac augue a nibh efficitur gravida sit amet sed eros. Quisque velit nulla, consequat sed pulvinar non, congue ut ante. Phasellus vehicula interdum leo, eget suscipit urna tincidunt ac. Praesent pharetra dolor nisi, ut accumsan augue condimentum in. Maecenas malesuada, dolor aliquam tincidunt eleifend, nibh tellus euismod quam, et convallis mauris dui eget orci. Maecenas at ante sed dui tempor fringilla vel maximus purus.

<!-- Scrollbar Light -->
<div class="overflow-y-scroll scrollbar-light ...">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<!-- Scrollbar Dark -->
<div class="overflow-y-scroll scrollbar-dark ...">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>