@enact/ui/useScroll/ScrollbarTrack.module.css

A collection of simplified unstyled cross-platform UI components for Enact

.scrollbarTrack {
  /* Set these to reasonable default values */
  --scrollbar-thumb-size-ratio: 1;
  --scrollbar-thumb-progress-ratio: 0;
  --scrollbar-thumb-size: calc(100% * var(--scrollbar-thumb-size-ratio));
  --scrollbar-thumb-progress: calc(((1 - var(--scrollbar-thumb-size-ratio)) * var(--scrollbar-thumb-progress-ratio)) * 100%);
  position: relative;
  width: 0.125rem;
  height: 0.125rem;
  margin: auto;
  opacity: 0;
  flex: auto;
  transition: opacity 100ms linear;
  will-change: transform, top, left, right;
}
.scrollbarTrack::before {
  background: rgba(102, 102, 102, 0.75);
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  will-change: transform, top, left, right;
}
.scrollbarTrack.vertical::before {
  height: var(--scrollbar-thumb-size);
  top: var(--scrollbar-thumb-progress);
}
.scrollbarTrack:not(.vertical)::before {
  width: var(--scrollbar-thumb-size);
  left: var(--scrollbar-thumb-progress);
  top: 50%;
  transform: translateY(-50%);
}