JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<div id="overflowed">
    dddddddddd
    ddddddddddddd
    dddddddddddddd
    dddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddddddddddddd
    ddddddddddddd
    dddddddddddddd
</div>

CSS

#overflowed {
    width:200px;
    height:200px;
    border:1px solid black;
    overflow-y:scroll;
    overflow-x:hidden;
}
#overflowed::-webkit-scrollbar {
    width: 0.5em;
    display:none;
    margin-left:-10px;
}
 #overflowed:hover::-webkit-scrollbar {
     display:block;
 }
#overflowed::-webkit-scrollbar-track {
    background:#ddd;
     background:transparent;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    opacity: 0.4;
}
 
#overflowed::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: none;
}