Scrollbars

[dragontheory]

Custom scrollbar https://www.30secondsofcode.org/css/s/custom-scrollbar

CodePen demo https://codepen.io/dragontheory/pen/mdxJXyw?editors=1100

[dragontheory]

Scroll bars are as such;

/*-----------------------------
  Scrollbars
-----------------------------*/

*::-webkit-scrollbar {
  display: block;
  width: 1rem;
}

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

*::-webkit-scrollbar-track {background-color: rgba(48,190,255,0.0);}

*::-webkit-scrollbar-track-piece {background-color: rgba(48,190,255,0.0);}

@supports (overflow: overlay) {body {overflow: overlay;}}

* {--scrollbar-color: rgba(48,190,255,0.0);}

*:hover, *:focus, *:focus-within {--scrollbar-color: rgba(48,190,255,0.3) !important;}

*::-webkit-scrollbar-thumb {
  background-color: rgba(48,190,255,0.0);
  border: 5px solid transparent;
  border-radius: 1.5rem;
  box-shadow: 0.25rem 0 0 0.25rem var(--scrollbar-color) inset;
}

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

/* FIREFOX */
/* Target elements, not :root{} */
/* https://codeconvey.com/custom-scrollbar-css-for-all-browsers/ */
panel-list,
app-panel-scroll {
  scrollbar-color: rgba(48,190,255,0.0) rgba(48,190,255,0.0); /* Thumb and track color */
  scrollbar-width: thin; /* Track width */
  transition: scrollbar-color 250ms;
}
panel-list:hover {scrollbar-color: rgba(48,190,255,0.3) rgba(48,190,255,0.0);}
app-panel-scroll:hover {scrollbar-color: rgba(48,190,255,0.3) rgba(48,190,255,0.0);}

/*
Progressive enhancements (not working yet)

scrollbar:hover thumb {cursor: ns-resize;}
cursor: ns-resize;
transition: background-color 250ms;
*/