@substrate-system/scroll-progress

v0.1.10

Published

6 months ago

A webcomponent that shows scroll progress

0High
0Medium
0Low

nichoth

scroll progress component

scroll progress

A progress bar that shows how far down the page you have scrolled, as a web component.

This is implemented as a "split component", meaning that it should be easy to render this to a string of HTML in node.

Install

npm i -S @substrate-system/scroll-progress

Demonstration

See substrate-system.github.io/scroll-progress for an example with the default CSS.

Example

// index.js
import { ScrollProgress } from '@substrate-system/scroll-progress'

ScrollProgress.define()

<!-- index.html -->
<body>
    <div id="root">
        <scroll-example></scroll-example>
    </div>

    <script type="module" src="./index.js"></script>
</body>

ssr

In node or another servers-side runtime, import the /ssr path.

import { html, outerHTML } from '@substrate-system/scroll-progress/ssr'

const innerHTML = html()
// does not include the custom element tag, only the inner HTML.

const element = outerHTML()
// => '<scroll-progress>...</scroll-progress>'

Client-side

If you "pre-render" this servers-side, then you can include the "light" version, which is just the client-side JS, no rendering logic.

import { define, TAG } from '@substrate-system/scroll-progress/client'

define()  // must call CustomElementRegistry.define()

// TAG is the element name
const els = document.querySelector(TAG)

Modules

This exposes ESM and common JS via package.json exports field.

Bundler

Import as normal.

// this is the full version, with rendering logic
import { ScrollProgress } from '@substrate-system/scroll-progress'
import '@substrate-system/scroll-progress/css'
// or minified css
import '@substrate-system/scroll-progress/min/css'

// must define the component
ScrollProgress.define()

pre-bundled

This is a bundle of the progress component and its one dependency, raf-scroll.

It is minifed, and can be directly included in the HTML. This will define the component with its default name.

This is appropriate for SSR situations only. In the interest of keeping file sizes small, this cannot render.

Copy

cp ./node_modules/@substrate-system/scroll-progress/dist/browser.min.js ./public/scroll-progress.min.js

Link

<body>
    <scroll-progress></scroll-progress>
</div>
<script type="module" src="./scroll-progress.min.js"></script>

CSS

Override the variable --scroll-progress-color to customize the color.

.scroll-progress {
    --scroll-progress-color: pink;
}

develop

Start a localhost server:

npm start