adaptiveScrollFade
Adaptively fades content in and out while scrolling.
The box below grows with your viewport. On a large screen (Full-HD or taller) the whole text fits, so no fade appears at all — the component only fades what is actually clipped. Make the window shorter, or open this on a smaller screen, and the text starts to overflow: the top and bottom edges then fade adaptively, each only while content is hidden beyond it.
You are reading this inside a scrollable box whose height follows the size of your browser window. If you can see every word below without a scrollbar and without any fading edges, your viewport is tall enough to hold the entire text at once — which is exactly when this component stays completely out of the way.
Now shrink the window vertically. As soon as the text no longer fits, the box becomes scrollable and its lower edge quietly fades out. That fade is a visual hint that more text waits just below the fold, so nobody mistakes a clipped paragraph for the end of the story.
Start scrolling and a matching fade appears at the top as well, signalling that content has scrolled out of view above you. Each edge fades independently, and only while there is actually something hidden beyond it — scroll all the way up and the top fade disappears, scroll to the very bottom and the lower one vanishes too.
None of this rewrites the text or the markup. The script only flips two state attributes on this container while you scroll; the fade itself is a pure CSS mask. Turn JavaScript off entirely and the box still scrolls perfectly — it simply shows no fade, and every word stays fully readable. The enhancement adds a helpful hint, never a dependency.