Add Shadow To Boundary Of Scrollable Element – ScrollShadow

ScrollShadow is a JavaScript plugin which adds customizable shadow effects to the upper and/or lower boundaries of your scrollable container.

See Also:

• Add Top & Bottom Shadows To Scrollable Content – jQuery scrollingShadows
• Add Scroll Shadows To Wide HTML Tables – TableScrollShadow
• Lightweight Visual Indicator For Scrollable Content – overflow-shadow

How to use it:

Download the ScrollShadow plugin and run the command:

npm install

The HTML structure.

<div data-plugin-init="PluginScrollShadow"
     class="demo">
  <div class="plugin-scroll-shadow_wrapper">
    Long Content Here
  </div>
</div>

Make the container scrollable.

.demo {
  height: 150px;
  overflow: auto;
}

Customize the plugin with the following attributes:

<div data-plugin-init="PluginScrollShadow"
     data-plugin-shadow-header="plugin-scroll-header"
     data-plugin-shadow-footer="plugin-scroll-footer"
     data-plugin-shadow-height="20"
     data-plugin-shadow-initial-color="rgba(255, 198, 157, .5)"
     data-plugin-shadow-final-color="rgba(50, 129, 232, .1)"
     class="demo">
  <div class="plugin-scroll-shadow_wrapper">
    Long Content Here
  </div>
</div>