JSFiddle - React, Tailwind, and code Playground

by rbyers

HTML

<div id="sample-scroller" class="scroller hidden-scrollbar">
</div>

CSS

.scroller {
    border: 1px solid #eee;
    display: inline-block;
    height: 280px;
    line-height: 28px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100px;
  }

  ::-webkit-scrollbar {
    background-color: #f5f5f5;
    border: none;
    overflow: visible;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border: none;
  }

  .scroller.hidden-scrollbar::-webkit-scrollbar {
    background: transparent;
  }

  .scroller.hidden-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .item {
     display: block;
     white-space: no-wrap;
  }

JavaScript

var hideAfterScrollDelay = 500; /* ms */
  var lastScroll = null;

  function $(name) {
    return document.getElementById(name);
  }

  function initialize() {
    var scroller = $('sample-scroller');
    for (var i = 0; i < 30; i++) {
      var element = document.createElement('div');
      element.className = 'item';
      element.textContent = 'item ' + (i+1);
      scroller.appendChild(element);
    }
    scroller.addEventListener('mouseover', function() {
      showScrollbar(true);
    });
    scroller.addEventListener('mouseout', function() {
      showScrollbar(false);
    });
    scroller.addEventListener('scroll', function() {
      lastScroll = new Date();
      showScrollbar(true);
      setTimeout(function() {
        delayedScrollbarReset();
      }, hideAfterScrollDelay);
    });
  }

  function showScrollbar(state) {
    var scroller = $('sample-scroller');
    if (state)
      scroller.classList.remove('hidden-scrollbar');
    else
      scroller.classList.add('hidden-scrollbar');
  }

  function delayedScrollbarReset() {
    var now = new Date();
    var elapsed = now - lastScroll;
    if (elapsed < hideAfterScrollDelay) {
      var delay = hideAfterScrollDelay - elapsed;
      setTimeout(delayedScrollbarReset, delay);
    } else {
      showScrollbar(false);
    }
  }

  initialize();