CSS Custom Scroll Bar
How to make a custom vertical scroll bar with a little flare to make it stand out. This example was taken and slightly modified from CSS Tricks. CSS Tricks is one of the best CSS resources out there. https://css-tricks.com/

.scrollbar-table
{
position: relative;
height: 300px;
overflow: auto;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 400px;
}
#wrapper
{
text-align: center;
width: 400px;
margin: auto;
}
/*
* SCROLL BAR STYLE
*/
#style-red::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 20px;
background-color: #F5F5F5;
}
#style-red::-webkit-scrollbar
{
width: 28px;
background-color: #F5F5F5;
}
#style-red::-webkit-scrollbar-thumb
{
border-radius: 20px;
height: 50px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #f35c16;
}
HTML
<div class="scrollbar-table" id="style-red">
</div>
You must be logged in to post a comment.