title: Show scrollbar only when scrolling and hide it when not scrolling
body: <p>This works completely fine on desktops:</p>
  <pre><code>.container::-webkit-scrollbar {
    width: 5px;
  }
  .container::-webkit-scrollbar-track {
    background: none;
  }
  .container::-webkit-scrollbar-thumb {
    background: #f5f5f573;
    border-radius: 50px;
    visibility: hidden;
  }
  .container::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  .container:hover::-webkit-scrollbar-thumb {
    visibility: visible;
  }
  </code></pre>
  <p>The <code>container</code> is the container for the color buttons. The problem is that it doesn't disappear on mobile devices. Is there a way that I can make the scrollbar disappear <strong>when not scrolling</strong> down on <em>mobile devices</em>? And then just <strong>reappear</strong> when I scroll again?</p>