JSFiddle - React, Tailwind, and code Playground

by pankaj agrawal

HTML

<div class="container">
  webkit custom scrollbars + CSS transition = &lt;3
  <div style="height: 1000px; width:100%;"></div>
</div>

CSS

html, body {
    height: 100%;
    margin:0;
    overflow: hidden;
}
.container {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* trick to only apply in webkit */

  .container {
      background-color: rgba(0,0,0,0);
      -webkit-background-clip: text;
      /* uncomment following line to see the trick in actions */
      /* -webkit-text-fill-color: transparent; */
      transition: background-color .8s;
  }
  .container:hover {
     background-color: rgba(0,0,0,0.18);  
  }
  .container::-webkit-scrollbar {
      width: 8px;
      height: 8px;
  }
  .container::-webkit-scrollbar-track {
      display: none;
  }
  .container::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: inherit;
  }