Scrollbar

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

Examples

.scrollbar-gutter-auto {
  scrollbar-gutter: auto;
}

.scrollbar-stable {
  scrollbar-gutter: stable;
}

.scrollbar-stable-both-edges {
  scrollbar-gutter: stable both-edges;
}

.scrollbar-width-auto {
  scrollbar-width: auto;
}

.scrollbar-width-thin {
  scrollbar-width: thin;
}

Responsive mixins

Responsive modifier mixins are also provided with no pre-defined breakpoints so they can be included as modules with custom SCSS breakpoints. The following demonstrates the static and responsive names for the .scrollbar-stable utility.

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

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin(s) anywhere below.

custom.scss

@use "sassmods/scss/sassmods" as *;
@include scrollbar-css;

// Example breakpoint
@media (max-width: 480px) {
  @include scrollbar-sm-css;
}

Source

scrollbar.scss

//  ------------------------------------------------------------
//  Scrollbar
//  ------------------------------------------------------------
$scrollbar-gutter-auto:                 auto;
$scrollbar-gutter-stable:               stable;
$scrollbar-gutter-stable-both-edges:    stable both-edges;
$scrollbar-width-auto:                  auto;
$scrollbar-width-thin:                  thin;

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

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

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

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

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

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

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

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

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

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

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

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

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

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