Package Exports

swinch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (swinch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

swinch

The best and most flexible alternative to full-page scroll-controlling javascript plugins

There are no runtime dependencies!!!

The build is dependent on the fantastic zenscroll plugin!

Installation

npm install swinch, bower install swinch, yarn add swinch
Include dist/swinch.js or swinch.min.js (uses UMD)

Setup

After the DOM loads, call swinch.init([sections][, options])
When you're done with it, you can call swinch.destroy()

If no sections are set, then document.querySelectorAll('section') will be used by default.

Options

{
    /**
     * The duration of the snap, in milliseconds.
     * 
     * This can be overridden with the attribute "swinch-duration" on a section.
     * ex. <section swinch-duration="1000"></section>
     *
     * @type {Number}
     */
    duration: 500,

    /**
     * The offset of the snapping target.
     *
     * This can be overridden with the attribute "swinch-offset" on a section.
     * ex. <section swinch-offset="100"></section>
     *
     * @type {Number}
     */
    offset: 0,

    /**
     * Force snap on a part of each section.
     *
     * null     Snap to the bottom of each section if going up & top if going down.
     * 'top'    Force snap to the top of each section
     * 'bottom' Force snap to the bottom of each section
     * 
     * @type {string|null}
     */
    snapTo: null,

    /**
     * Called before the snapping starts
     *
     * @param  {Node}   currentSection
     * @param  {Node}   nextSection
     * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
     *
     * @return {void}
     */
    onBeforeSnap: function onBeforeSnap(currentSection, nextSection, scrollDirection) {
        //
    },

    /**
     * Called after the snapping completes
     *
     * @param  {Node}   currentSection
     * @param  {Node}   previousSection
     * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
     *
     * @return {void}
     */
    onSnapped: function onSnapped(currentSection, previousSection, scrollDirection) {
        //
    }
}

Example

Checkout test.html for an example.