Scroll shadow mixin based on http://lea.verou.me/2012/04/background-attachment-local/

scroll-shadow.scss

$scroll-shadow-background: rgb(255, 255, 255) !default;
$scroll-shadow-color: rgb(0, 0, 0) !default;
$scroll-shadow-intensity: 0.15 !default;
$scroll-shadow-cover: 40px !default;
$scroll-shadow-size: 14px !default;

@mixin scroll-shadow-vertical($background-color: $scroll-shadow-background, $shadow-intensity: $scroll-shadow-intensity, $shadow-color: $scroll-shadow-color, $cover-size: $scroll-shadow-cover, $shadow-size: $scroll-shadow-size) {
  background-image:
    // Shadow covers
    linear-gradient($background-color 30%, rgba($background-color,0)),
    linear-gradient(rgba($background-color,0), $background-color 70%),

    // Shadows
    radial-gradient(farthest-side at 50% 0, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)),
    radial-gradient(farthest-side at 50% 100%, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0));
  background-repeat: no-repeat;
  background-color: $background-color;
  background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size;
  background-position: 0 0, 0 100%, 0 0, 0 100%;

  // Opera doesn't support this in the shorthand
  background-attachment: local, local, scroll, scroll;
}

@mixin scroll-shadow-horizontal($background-color: $scroll-shadow-background, $shadow-intensity: $scroll-shadow-alpha, $shadow-color: $scroll-shadow-color, $cover-size: $scroll-shadow-cover, $shadow-size: $scroll-shadow-size) {
  background-image:
    // Shadow covers
    linear-gradient(90deg, $background-color 30%, rgba($background-color,0)),
    linear-gradient(90deg, rgba($background-color,0), $background-color 70%),
    // Shadows
    radial-gradient(farthest-side at 0 50%, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)),
    radial-gradient(farthest-side at 100% 50%, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0));

  background-repeat: no-repeat;
  background-color: $background-color;
  background-size: $cover-size 100%, $cover-size 100%, $shadow-size 100%, $shadow-size 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;

  // Opera doesn't support this in the shorthand
  background-attachment: local, local, scroll, scroll;
}