JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="contentoverflow"></div>
<div class="anotherscrollbar"><p>ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble ramble...

CSS

.contentoverflow{
height:100%;   
}
.anotherscrollbar{
position:relative;
top:0px;
background-color:#333;
height:300%;
width:100%;    
overflow:scroll;
}
/* For the "inset" look only */
html {
    overflow: auto;
}
body {
    position: absolute;
    top: 10px;
    left: 20px;
    bottom: 0px;
    right: 0px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color:rgba(100,100,100,0.1);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.4); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}
/*anotherscrollbar */
.anotherscrollbar::-webkit-scrollbar {
    width: 8px;
    background-color:#eaeaea;
}
 
/* Track */
.anotherscrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.01); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color:rgba(200,200,200,.01);
}
 
/* Handle */
.anotherscrollbar::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.1); 
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2); 
}
.anotherscrollbar::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

JavaScript

//Custom Scrollbars in WebKit

//via http://css-tricks.com/custom-scrollbars-in-webkit/