Scrollbar

Scrollbar gutter and width utility styles with module mixins for responsive modifiers.

Utilities (anchor)

Scrollbar utilities and property values
Utility class	Property values
.scroll-gutter-auto	scrollbar-gutter: auto
.scroll-gutter-stable	scrollbar-gutter: stable
.scroll-gutter-stable-edges	scrollbar-gutter: stable both-edges
.scroll-gutter-initial	scrollbar-gutter: initial
.scroll-width-auto	scrollbar-width: auto
.scroll-width-thin	scrollbar-width: thin
.scroll-width-initial	scrollbar-width: initial
.scroll-color	scrollbar-color: var(--scroll-thumb, initial) var(--scroll-track, initial)
.scroll-color-initial	scrollbar-color: initial

Responsive mixins (anchor)

Responsive modifier mixins are provided to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.scrollbar-stable-auto
.scrollbar-stable-auto-xxl
.scrollbar-stable-auto-xl
.scrollbar-stable-auto-lg
.scrollbar-stable-auto-md
.scrollbar-stable-auto-sm
.scrollbar-stable-auto-xs
.scrollbar-stable-auto-xxs

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixins anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include scrollbar-gutter-css;
@include scrollbar-width-css;
@include scrollbar-color-css;

// Example breakpoint
@media (width <= 480px) {
  @include scrollbar-gutter-sm-css;
  @include scrollbar-width-sm-css;
  @include scrollbar-color-sm-css;
}

All can also be included grouped together using a single mixin:

custom.scss

@use "stylemods/scss" as *;
@include scrollbars-css;

// Example breakpoint
@media (width <= 480px) {
  @include scrollbars-sm-css;
}

Source code (anchor)

scrollbar.scss

//  ------------------------------------------------------------
//  Scrollbar
//  ------------------------------------------------------------
$scrollbar-thumb-color:     var(--scroll-thumb, initial) !default;
$scrollbar-track-color:     var(--scroll-track, initial) !default;

$scrollbar-color: (
  "scroll-color": $scrollbar-thumb-color $scrollbar-track-color,
  "scroll-color-initial": initial,
) !default;

$scrollbar-gutter: (
  "stable": stable,
  "stable-edges": stable both-edges,
  "auto": auto,
  "initial": initial,
) !default;

$scrollbar-width: (
  "auto": auto,
  "thin": thin,
  "initial": initial,
) !default;

@mixin scrollbar-color-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name} {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name} {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint XXL
@mixin scrollbar-color-xxl-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-xxl-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-xxl {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-xxl-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-xxl {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint XL
@mixin scrollbar-color-xl-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-xl-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-xl {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-xl-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-xl {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint LG
@mixin scrollbar-color-lg-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-lg-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-lg {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-lg-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-lg {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint MD
@mixin scrollbar-color-md-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-md-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-md {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-md-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-md {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint SM
@mixin scrollbar-color-sm-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-sm-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-sm {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-sm-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-sm {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint XS
@mixin scrollbar-color-xs-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-xs-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-xs {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-xs-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-xs {
      scrollbar-width: #{$value};
    }
  }
}

// Breakpoint XXS
@mixin scrollbar-color-xxs-css {
  @each $name, $value in $scrollbar-color {
    .#{$name} {
      scrollbar-color: #{$value};
    }
  }
}

@mixin scrollbar-gutter-xxs-css {
  @each $name, $value in $scrollbar-gutter {
    .scroll-gutter-#{$name}-xxs {
      scrollbar-gutter: #{$value};
    }
  }
}

@mixin scrollbar-width-xxs-css {
  @each $name, $value in $scrollbar-width {
    .scroll-width-#{$name}-xxs {
      scrollbar-width: #{$value};
    }
  }
}

// Grouped mixins
@mixin scrollbars-css {
  @include scrollbar-gutter-css;
  @include scrollbar-width-css;
  @include scrollbar-color-css;
}

@mixin scrollbars-xxl-css {
  @include scrollbar-gutter-xxl-css;
  @include scrollbar-width-xxl-css;
  @include scrollbar-color-xxl-css;
}

@mixin scrollbars-xl-css {
  @include scrollbar-gutter-xl-css;
  @include scrollbar-width-xl-css;
  @include scrollbar-color-xl-css;
}

@mixin scrollbars-lg-css {
  @include scrollbar-gutter-lg-css;
  @include scrollbar-width-lg-css;
  @include scrollbar-color-lg-css;
}

@mixin scrollbars-md-css {
  @include scrollbar-gutter-md-css;
  @include scrollbar-width-md-css;
  @include scrollbar-color-md-css;
}

@mixin scrollbars-sm-css {
  @include scrollbar-gutter-sm-css;
  @include scrollbar-width-sm-css;
  @include scrollbar-color-sm-css;
}

@mixin scrollbars-xs-css {
  @include scrollbar-gutter-xs-css;
  @include scrollbar-width-xs-css;
  @include scrollbar-color-xs-css;
}

@mixin scrollbars-xxs-css {
  @include scrollbar-gutter-xxs-css;
  @include scrollbar-width-xxs-css;
  @include scrollbar-color-xxs-css;
}