Add Top & Bottom Shadows To Scrollable Content - jQuery scrollingShadows

scrollingShadows is a super simple jQuery plugin that creates subtle shadows on top and bottom of the scrollable container, providing visual feedback for users indicating that there's more content they can scroll through.

See Also:

• Add Scroll Shadows To Wide HTML Tables – TableScrollShadow

How to use it:

1. Load the scrollingShadows plugin's JavaScript and Stylesheet.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery scrollingShadows plugin -->
<script src="/path/to/jquery.scrollingShadows.js"></script>
<link rel="stylesheet" href="/path/to/css/jquery.scrollingShadows.css" />

2. Initialize the plugin on the scrollable content and done. Note that the parent container must have overflow-y set to auto or scroll.

<div id="container" style="width: 400px; height: 400px; overflow: auto">
  <div id="longBox">
    Long Content here
  </div>
</div>

$(function(){
  $("#container").scrollingShadows("#longBox");
});

3. Override the default styles of the shadows.

.scrollShadows-overlay {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  left: 0;
  moz-transition: box-shadow 0.05s linear;
  ms-transition: box-shadow 0.05s linear;
  o-transition: box-shadow 0.05s linear;
  pointer-events: none;
  position: absolute;
  transition: box-shadow 0.05s linear;
  webkit-transition: box-shadow 0.05s linear;
  z-index: 100;
}

.scrollShadows-overlay.top {
  box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0),inset 0 -12px 12px -8px rgba(0,0,0,0.5);
  moz-box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0),inset 0 -12px 12px -8px rgba(0,0,0,0.5);
  webkit-box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0),inset 0 -12px 12px -8px rgba(0,0,0,0.5);
}

.scrollShadows-overlay.middle {
  box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0.5),inset 0 -12px 12px -8px rgba(0,0,0,0.5);
  moz-box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0.5),inset 0 -12px 12px -8px rgba(0,0,0,0.5);
  webkit-box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0.5),inset 0 -12px 12px -8px rgba(0,0,0,0.5);
}

.scrollShadows-overlay.bottom {
  box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0.5),inset 0 -12px 12px -8px rgba(0,0,0,0);
  moz-box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0.5),inset 0 -12px 12px -8px rgba(0,0,0,0);
  webkit-box-shadow: inset 0 12px 12px -8px rgba(0,0,0,0.5),inset 0 -12px 12px -8px rgba(0,0,0,0);
}

---

This awesome jQuery plugin is developed by STRML. For more Advanced Usages, please check the demo page or visit the official website.