Lightweight Visual Indicator For Scrollable Content – overflow-shadow

A tiny and simple-to-implement JavaScript library that adds gradient shadows to the edge of the scrollable containers, indicates that more content can be revealed by scrolling.

See Also:

• Add Scroll Shadows To Wide HTML Tables – TableScrollShadow
• Add Shadow To Boundary Of Scrollable Element – ScrollShadow
• Add Top & Bottom Shadows To Scrollable Content – jQuery scrollingShadows

How to use it:

1. Download and import the overflow-shadow.js into your HTML document.

<script src="overflow-shadow.js"></script>

2. Just add the overflow-shadow class to your scrollable DIV and the library will take care of the reset.

<div overflow-shadow>
  ...
</div>