Google Docs Custom Scrollbars

by goldfingerxyz

HTML

<div class="scrollbar-container">
    <div class="inner">
        <p>Hi there! Nice scrollbars, aren't they?</p>
    </div>
</div>

CSS

.scrollbar-container {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: 20px;

    border: 4px solid rgba(0, 0, 0, 0.2);
    overflow: auto;
    background-color: whiteSmoke;
}
.scrollbar-container .inner {
    height: 2011px;
    width: 1985px;
    padding: 1em;
    background-color: white;
    font-family: sans-serif;
}
::-webkit-scrollbar {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border: solid whiteSmoke 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}