scrolles
v3.1.8
Published
A deadly simple scroll progress indicator based on css and a bunch of js.
Downloads
14
Maintainers
equinusocioReadme
Scrolles
A deadly simple and highly customizable scroll progress indicator
Installation
npm i scrollesUsage
Import the function and pass the optional configuration:
import { Scrolles } from 'scrolles';
Scrolles({
/* The elements selector. USe a custom selector to which bind the indicator */
selector?: string = '[data-scrolles]',
/* Set the progression mode. If set to `cotinuous` will let the indicator progress as you scroll the content, while `steps` the progress is incremented by a fixed amount. */
mode?: 'continuous' | 'steps' = 'continuous',
/** The position of the indicator */
position?: 'top' | 'bottom' = 'top';
/** The progress direction. If `true` the indicator will grow from the "end" to start */
reverse?: boolean = false;
});Then you can add the selector you've defined to any not-void/replaced element (any element that can contains pseudo elements):
<html lang="en" data-scrolles>
<head>
</head>
<body>
<div data-scrolles>
....
</div>
</body>
</html>Finally, add this small and optional CSS snippet if you want to customize the progress indicator, by changing the default values.
[data-scrolles]{
--scrolles-height: 3px;
--scrolles-fill: hotpink;
--scrolles-margin: 0;
--scrolles-easing: cubic-bezier(0.25, 1, 0.5, 1);
}Note:
[data-scrolles]is the dafult selector, if you are using a custom selector, you have to use it also inside the CSS.