FluidScroll

A cross-browser compatible, lightweight, easy-to-use library for smooth scrolling.

fluidScroll({ options });

Installation

This library can be installed with NPM.

npm i @orthodoxauto/fluidscroll

Then, it may be used in this manner:

// ES Module
import { fluidScroll } from '@orthodoxauto/fluidscroll';

// CommonJS
const fluidScroll = require('@orthodoxauto/fluidscroll');

Alternatively, it can be directly included as a script on any HTML page. For example, with a CDN:

<script
    src="https://cdn.jsdelivr.net/npm/@orthodoxauto/[email protected]"
    integrity="sha384-ZvfwaJZFftLPOaPS13spccPYdWRcrfz/GDgUYAf7b6I2OBXY74KiAC6WVg0XF3Qq"
    crossorigin="anonymous"
></script>

You can also manually download dist/fluidscroll.umd.min.js and include it in the head of the page using your own path:

<script src="path/to/fluidscroll.min.js"></script>

It can additionally be used in a module script:

<script type="module">
    import { fluidScroll } from 'https://cdn.jsdelivr.net/npm/@orthodoxauto/[email protected]/dist/fluidscroll.esm.mjs';
</script>

Import maps can furthermore be used to simplify the module specifier when importing as well as check the integrity.

<script type="importmap">
    {
        "imports": {
            "fluidscroll": "https://cdn.jsdelivr.net/npm/@orthodoxauto/[email protected]/dist/fluidscroll.esm.mjs"
        },
        "integrity": {
            "https://cdn.jsdelivr.net/npm/@orthodoxauto/[email protected]/dist/fluidscroll.esm.mjs": "sha384-uRZwvJLM1xS19wbYkR8/uqMLzM58mVHEluImXjOaBV4H3LerGAjCSGbQfBYrpNCQ"
        }
    }
</script>
<script type="module">
    import { fluidScroll } from 'fluidscroll';
</script>

Simple Uses

Scroll to y-position 1000px in 750 milliseconds:

fluidScroll({ yPos: 1000, duration: 750 });

Scroll to the bottom of the page:

fluidScroll({ yPos: 'end' });

Scroll to x-position 500px and y-position 500px:

fluidScroll({ xPos: 500, yPos: 500 });

Options

Return Value

fluidScroll returns an object with the destroy property which is a function that stops the scrolling when called.

var s = fluidScroll({ yPos: 5000, duration: 3000 });
// Stop the scrolling sometime later
s.destroy();

Instantiation

Using the new operator will create an instance with the passed in options as defaults. Properties specified in this options object will override the original defaults. Call the fluidScroll method on the returned value to perform smooth scrolling with these defaults.

var scroller = new fluidScroll({ duration: 700, block: 'center' });
scroller.fluidScroll({ yPos: 500 }); // duration is 700 (rather than the original default of 500)

Getting and Setting Global Defaults

fluidScroll.defaults() returns an object containing the default values for each option. Passing an object to fluidScroll.defaults will overwrite each option in the defaults with the value from that object if it is set.

fluidScroll.defaults({ duration: 700 }); // set default duration to 700ms

Other Methods and Properties

fluidScroll.stopAll() stops all current scroll animations and returns true/false depending on whether there were running animations that were stopped.

fluidScroll.scrolling() returns true/false depending on whether or not there are current scrolling animations.

fluidScroll.nativeSupported indicates whether or not the CSS scroll-behavior property is supported in the current browser.

fluidScroll.easing is an object containing the predefined easing functions.

Examples

Examples of common use cases can be found in the examples folder. These can be run by cloning the repository, then opening any of the HTML files in a browser. Note that many newer JavaScript features are not used in order to demonstrate more cross-browser compatible code.