The scrollbar is a unique element that can be styled by targeting the overflow of its parent element.
Here's an example showcasing how to style two different scrollbars:
.scrollbar-1,
.scrollbar-2 {
float: left;
margin-right: 2em;
width: 10em;
height: 5em;
overflow: auto;
}
/* Specific styling for each scrollbar */
.scrollbar-1::-webkit-scrollbar {
background: gray;
}
.scrollbar-1::-webkit-scrollbar-thumb {
background: red;
}
.scrollbar-2::-webkit-scrollbar {
background: yellow;
}
.scrollbar-2::-webkit-scrollbar-thumb {
background: blue;
}
/* General styling for all scrollbars */
::-webkit-scrollbar {
width: 12px;
border-radius: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 12px;
box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,.5);
border-radius: 12px;
}
<div class="scrollbar-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a risus arcu. Ut tempor laoreet turpis. Curabitur facilisis faucibus massa sit amet imperdiet. Fusce vestibulum sodales egestas. Donec mattis fringilla ante non euismod. Donec ullamcorper odio at ligula maximus ullamcorper.
</div>
<div class="scrollbar-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a risus arcu. Ut tempor laoreet turpis. Curabitur facilisis faucibus massa sit amet imperdiet. Fusce vestibulum sodales egestas. Donec mattis fringilla ante non euismod. Donec ullamcorper odio at ligula maximus ullamcorper.
</div>
It's worth noting that adding a scrollbar to a table element isn't straightforward. One workaround is wrapping the table in a div and applying the scrollbar styles there or targeting the tbody element for styling.
HTML:
<div class="scrollbar">
<table>
...
</table>
</div>
CSS:
.scrollbar::-webkit-scrollbar { ... }
Alternatively, with HTML:
<table class="table-scrollbar">
<tbody>
...
</tbody>
</table>
CSS:
.table-scrollbar tbody::-webkit-scrollbar { ... }