Scrollbox

Overflow shadows for indicating scrollable content.

See the Github repositoty at https://github.com/SimonPadbury/scrollbox.

Based on an original idea at https://css-tricks.com/thats-just-how-i-scroll/

In a feed, wide gallery, massive table, or any area where the content is larger than its constraining wrapper, how do we indicate that there is more content to scroll down to, given that we can't always rely on the scrollbar being visible, especially on mobile?

All you need to do is add the separate script and stylesheet to your project (CSS and SCSS are available), and do what you require, according to the usage instructions below the demo.

Demo

With scrollbox scrollbox-horizontal:

With scrollbox scrollbox-vertical:

Usage

1. You need an outer and inner block element in your HTML, with classes as follows:

   <!-- If you want a horizontal overflow -->
   
   <div class="scrollbox scrollbox-horizontal">
     <div class="scrollbox-inner">
       Your (potentially) scrollable content
     </div>
   </div>
   
   <!-- If you want a vertical overflow -->
     
   <div class="scrollbox scrollbox-vertical">
     <div class="scrollbox-inner">
       Your (potentially) scrollable content
     </div>
   </div>
   

2. When setting up, you must decide whether your (potentially) overflowing .scrollbox-inner will overflow horizontally or vertically. Specify your choice on the outer wrapper, using either scrollbox scrollbox-horizontal or scrollbox scrollbox-vertical (not both).
3. The scrollbox.js detects only whether your inner content is at the start or the end of its overflow scroll. Then it adds or removes CSS classes to the outer scrollbox.
4. Then scrollbox.css accordingly styles ::before or ::after pseudo elements with small CSS gradients mimicing shadows. (It does not use inset box shadows, because when I tried these, they don't work well in Safari.)

That’s all there is to it.