Fade Scroll is a cosmetic module which adds subtle gradient masks to the overflow of scrollable content.
See the demo page for an interactive demonstration.
$ npm i @brybrant/fade-scroll<html>
<head>
<link rel='stylesheet' href='fade-scroll.css'/>
</head>
<body>
<div id='horizontal'>
<p>Some horizontal overflowing content...</p>
</div>
<div id='vertical'>
<p>Some vertical overflowing content...</p>
</div>
<script type='module' src='index.js'></script>
</body>
</html>See fade-scroll.css for the Fade Scroll styles.
// index.js
import * as FadeScroll from '@brybrant/fade-scroll';
// Basic usage
const horizontal = new FadeScroll.Horizontal('#horizontal').mount();
// Set options
const vertical = new FadeScroll.Vertical('#vertical', {
hideScrollbar: true,
}).mount();
// Change options
horizontal.options.captureWheel = true;
vertical.options.hideScrollbar = true;
// Destroy
horizontal.destroy();
vertical.destroy();The constructor function takes two arguments:
-
HTMLElement or querySelector string (this will be the
contentof the Fade Scroller)
▪ Type:HTMLElement|String -
Fade Scroller options object
▪ Type:Object
...and returns a Fade Scroller:
-
The element selected in the first argument of the constructor function
▪ Type:HTMLElement
▪ Access:Read -
The element with overflow (contains
contentelement)
▪ Type:HTMLDivElement
▪ Access:Read -
The outer element (contains
scrollBarelement)
▪ Type:HTMLDivElement
▪ Access:Read -
The size of the
contentelement (in pixels)
▪ Type:Number
▪ Access:ReadHorizontal Vertical offsetWidthoffsetHeight -
The size of the
wrapperelement (in pixels)
▪ Type:Number
▪ Access:ReadHorizontal Vertical offsetWidthoffsetHeight -
The size of the overflow (
contentSizeminuswrapperSize)
▪ Type:Number
▪ Access:Read -
The scroll position of the
scrollBarelement (in pixels)
▪ Type:Number
▪ Access:Read / WriteHorizontal Vertical scrollLeftscrollTop -
The Fade Scroller options:
▪ Type:Object-
hideScrollbar
Hide the scrollbar?
▪ Type:Boolean
▪ Default:false
▪ Access:Read / Write -
captureWheel(Horizontal only)
Capture wheel events and translate to horizontal scroll movement?
▪ Type:Boolean
▪ Default:false
▪ Access:Read / Write
-
-
Starts observing the Fade Scroller elements to apply the correct classes when the sizes change
-
Stops observing the Fade Scroller elements and removes built-in event listeners and styles
-
Add a
scrollEventListener to thescrollBarelement -
Remove a
scrollEventListener from thescrollBarelement
Fade Scroll uses CSS masks to blend seamlessly with any background, however the CSS can be changed to use linear gradients for better compatibility if the background is a solid color.
Fade Scroll uses the Resize Observer API to apply the correct styles when the elements sizes change. You can Ponyfill for unsupporting browsers by using the setResizeObserver function:
import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
import * as FadeScroll from '@brybrant/fade-scroll';
FadeScroll.setResizeObserver(Polyfill);
// Create some Fade Scrollers after setting the polyfill...