JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

* {
      list-style:none;
      margin:0;
      padding:0;
    }
    body {
      background: #333;
      padding:20px;
    }
    #content {
      background:transparent;
      height:400px;
      padding:0 10px 0 0;
      width:400px;
    }
    #content li {
      background:#666;
      height:100px;
      margin-bottom:10px;
    }
    #content li:last-child { margin-bottom: 0; }

    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll;
    }
    .scrollable-content::-webkit-scrollbar {
      width: 10px;
    }
    
    #content:hover > .scrollable-content::-webkit-scrollbar{
       width: 20px;
      
    }

    .scrollable-content::-webkit-scrollbar * {
      background:transparent;
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:#999 !important;
    }