JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<div class="scrollbox">
    <ul>
        <li>Not enough content to scroll</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS

.scrollbox {
    overflow: auto;
    width: 200px;
    max-height: 200px;
    margin: 50px auto;
    
    background:
        linear-gradient(90deg, white 0%, rgba(255,255,255,0)),
        linear-gradient(-90deg, white 0%, rgba(255,255,255,0)) 100% 0,
        radial-gradient(
        farthest-side at 0% 50%,
        rgba(0,0,0,.2),
        rgba(0,0,0,0)
        ),
        radial-gradient(
        farthest-side at 100% 50%,
        rgba(0,0,0,.2),
        rgba(0,0,0,0)
        ) 100% 0%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 100px 137px, 100px 137px, 14px 137px, 14px 137px;
    background-attachment: local, local, scroll, scroll;
}
.scrollbox ul { width: 1000px; }