0.1.0 • Published 6 years ago

syzygy-window-scroller-js v0.1.0

Weekly downloads
2
License
ISC
Repository
-
Last release
6 years ago

Window Scroller

Window Scroller is JS library that provides scrolling to specific element on anchor click functionality.

Installation

Npm: npm install syzygy-window-scroller-js

Yarn: yarn add syzygy-window-scroller-js

Examples

ES6 Import:

import {windowScroller} from 'syzygy-window-scroller-js';

Node require:

const windowScroller = require('syzygy-window-scroller-js');

Example without resolvers:

windowScroller({
    selector: '.window-scroller',           //selector by which elements are chosen
    anchorAttribute: 'data-scroll-to',      //anchor attribute of element
    scrollDuration: 1000,                   //duration of scroll animation (in ms)
    scrollPeriod: 20,                       //timeout between every scroll position update (in ms)
});

Custom resolvers example:

windowScroller({
    elementsResolver: () => {
        console.log('custom elements resolver');
        return Array.prototype.slice.call(document.querySelectorAll('[data-scroll-to="#main"],[data-scroll-to="#konkurs"]'));
    },

    elementAnchorResolver: (element) => {
        console.log('custom elementAnchor resolver');
        return element.getAttribute('data-scroll-to').substr(1);
    },

    elementByAnchorResolver: (element) => {
        console.log('custom element by anchor resolver');
        return document.getElementById(element);
    },

    elementPositionResolver: (element) => {
        console.log('custom element position resolver');
        const result = window.document.scrollingElement.scrollTop
            + element.getBoundingClientRect().top;

        if (result < 0) {
            return 0;
        }

        return result;
    },

    scrollPositionResolver: () => {
        console.log('(spentTime, startPoint, difference, duration');
        return 0;
    },
});

Parameters

NameDescriptionDefault behaviour
selector: stringSelector by which anchor elements are chosenequals '.window-scroller'
anchorAttribute: stringAnchor attribute of elementequals data-scroll-to
duration: numberDuration of scroll animation (in ms)equals 5000
period: numberTimeout between every scroll position update (in ms)equals 20
elementsResolver: () => Elements[]Resolver of anchor elements (overrides selector)uses selector to find elements
elementAnchorResolver: (el: Element) => stringResolves given element anchor (overrides anchorAttribute)uses attribute to resolve anchor
elementByAnchorResolver: (anchor: string) => ElementResolves element by anchorResolves element by id as given anchor
elementPositionResolver: (el: Element) => numberResolves position to scroll by elementgets elements top position and subtracts offset
scrollPositionResolver: (spentTime: number, startPoint: number, difference: number, duration: number) => numberResolves position to scroll in specified timeuses easeInOutQuad function