Add Shadow To Boundary Of Scrollable Element – ScrollShadow

Category: Javascript | March 28, 2018
Author: rcdd
Views Total: 45 views
Official Page: Go to website
Last Update: March 28, 2018
License: MIT

Preview:

Add Shadow To Boundary Of Scrollable Element – ScrollShadow

Description:

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

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>

You Might Be Interested In:


Leave a Reply