Scroll Shadow SCSS mixin. Based on http://lea.verou.me/2012/04/background-attachment-local/

scroll-shadow.scss

// http://lea.verou.me/2012/04/background-attachment-local/
@mixin scroll-shadow($color: #fff, $width: 100%, $offset: 0) {
  background-image: /* Legacy - prefixed */
    /* Shadow covers */
    -webkit-linear-gradient($color 30%, rgba($color, 0)),
    -webkit-linear-gradient(rgba($color, 0), $color 70%),
    /* Shadows */
    -webkit-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    -webkit-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  background-image: /* Legacy */
    /* Shadow covers */
    linear-gradient($color 30%, rgba($color, 0)),
    linear-gradient(rgba($color, 0), $color 70%),
    /* Shadows */
    radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  background-image: /* W3C syntax */
    /* Shadow covers */
    linear-gradient($color 30%, rgba($color, 0)),
    linear-gradient(rgba($color, 0), $color 70%),
    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  background-position: 0 0, $offset 100%, 0 0, $offset 100%;
  background-repeat: no-repeat;
  background-size: $width 50px, $width 50px, $width 6px, $width 6px;
  background-attachment: local, local, scroll, scroll;
  background-color: $color;
}