CSS Scrolling Snippets

scrolling.css

/* The basics */

.scroll-container {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 50%);
  /* postcss-scrollbar will add the -webkit version automatically! */
}


/* Theming scrollbars */

html {
  /* defer to OS preference */
  color-scheme: dark light;

  /* override, assuming the theme toggler sets a data-theme attribute */
  &[data-theme=light] { color-scheme: light; }
  &[data-theme=dark] { color-scheme: dark; }
}

@media (pointer: fine) {
  .scroll-container {
    /* ...custom scrollbar styles only for desktop */
  }
}

/* Preventing layout shift */

.scroll-container {
  overflow: scroll;

  @supports (scrollbar-gutter: stable) {
    overflow: auto;
    scrollbar-gutter: stable;
  }
}

/* Scroll padding */

.scroll-container {
  scroll-padding-top: var(--header-height);
}


/* Scroll behavior */

@media (prefers-reduced-motion: no-preference) {
  .scroll-container {
    scroll-behavior: smooth;
  }
}


/* Overscroll behavior */

.scroll-container {
  overscroll-behavior: contain;
}


/* Scroll snapping */

.scroll-container {
  scroll-snap-type: x mandatory;

  & > * {
    scroll-snap-align: start;
  }
}