JSFiddle - React, Tailwind, and code Playground

by D7460N

HTML

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, nisi quo, aliquam corrupti expedita quam excepturi amet magnam itaque hic voluptatibus veritatis harum non dignissimos aspernatur voluptatem aut ducimus odio molestiae molestias eos minima soluta? Vero ipsam sint dignissimos et repellendus esse earum facere beatae harum perferendis laudantium cupiditate illum, consequuntur fuga itaque, non voluptatibus numquam pariatur, cum illo vitae.</p>
	<p>Veniam quaerat debitis ipsum eaque nemo! Repellat illum earum laborum, ad at quam dolorum optio architecto hic dolore inventore quia, et quasi ullam nemo. Tenetur dolore, vitae eos inventore tempora numquam error nemo odio sed iure, modi voluptate distinctio non ullam veritatis? Unde perspiciatis, sed quo ratione amet quod eaque, aliquid voluptas ad exercitationem magnam cupiditate, itaque ipsam pariatur quibusdam!</p>
	<p>Repudiandae quasi dolore vero ullam, reprehenderit exercitationem odio similique natus, possimus, ipsum sed explicabo officiis cum unde quidem nam iusto rerum soluta saepe. Aperiam ipsam molestias incidunt, debitis distinctio doloribus vitae doloremque? Necessitatibus placeat exercitationem voluptates deleniti minus quaerat ullam laudantium consequatur tempore, earum quam est quisquam! Blanditiis similique voluptates rerum ullam temporibus, reiciendis aliquam, in aspernatur nisi officiis suscipit.</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt consectetur, quidem id earum obcaecati possimus voluptate necessitatibus architecto repellat iure praesentium quam quia recusandae, sunt vitae officiis dignissimos odit vel eum. Corrupti modi maiores nemo recusandae. Id, deserunt soluta. Non voluptas, sed illum voluptate hic necessitatibus cumque itaque expedita exercitationem placeat voluptatibus commodi ipsam facilis. Debitis adipisci sint esse laudantium ipsum vitae similique animi illum. Asperiores rem atque consequuntur eligendi recusandae commodi facilis laudantium,...

CSS

::-webkit-scrollbar {
  display: block;
  width: 16px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-track {
  background-color: #00000000;
}

::-webkit-scrollbar-track-piece {
  background-color: #00000000;
}

body {
  overflow: overlay;
}

* {
  --scrollbar-color: #00000000;
}

*:hover, *:focus, *:focus-within {
  --scrollbar-color: #00000040 !important;
}

::-webkit-scrollbar-thumb {
  background-color: #00000000;
  border: 5px solid transparent;
  border-radius: 24px;
  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;
  transition: all 250ms;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color);
  border: 0 solid transparent;
  box-shadow: none;
}

JavaScript

var barTimeout;

document.body.onscroll = () => {
	if(barTimeout){
  	clearTimeout(barTimeout);
  }
  barTimeout = setTimeout(() => {
  	document.body.classList.remove('scrolling');
  }, 500);
  document.body.classList.add('scrolling');
}