Overscroll

Overscroll utility styles with module mixins for responsive modifiers.

Examples

.overscroll-auto {
  overscroll-behavior: auto;
}

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

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 .overscroll-auto utility.

.overscroll-auto
.overscroll-auto-xl
.overscroll-auto-lg
.overscroll-auto-md
.overscroll-auto-sm
.overscroll-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 overscroll-css;

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

Source

overscroll.scss

//  ------------------------------------------------------------
//  Overscroll behavior
//  ------------------------------------------------------------
$overscroll-auto:                       auto;
$overscroll-contain:                    contain;

$overscroll-behavior: (
  "overscroll-auto": $overscroll-auto,
  "overscroll-contain": $overscroll-contain,
) !default;

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

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

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

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

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

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