1.0.0 • Published 8 years ago

scroll-control v1.0.0

Weekly downloads
5
License
MIT
Repository
github
Last release
8 years ago

Scroll Control

Control your scroll IN A WAY THAT DOESN'T SUCK!

Do you hate it when the browser takes control of your scroll?

Do you like the idea generally, but haven't found a solution that doesn't annoy you?

FINALLY THERE IS AN ANSWER!!!

Installation

  1. npm install scroll-control
  2. Add to your webpack imports import ScrollControl from 'scroll-control'

Usage

  1. After the DOM loads, call ScrollControl.init([options])
  2. If you feel like it, call ScrollControl.destroy()

Configuration

{
    /**
     * An array of DOM elements that ScrollControl will snap to.
     * This defaults to document.querySelectorAll('section')
     *
     * @type {NodeList}
     */
    sections: [],

    /**
     * The duration of the snap, in milliseconds
     *
     * @type {Number}
     */
    duration: 500,

    /**
     * The offset of the snapping target
     *
     * @type {Number}
     */
    edgeOffset: 0,

    /**
     * Force ScrollControl to 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}
     */
    forceSnapOn: null,

    /**
     * Enable or disable smooth scrolling when clicking on in-page anchor tags.
     * This is just an extension of zenscroll.js,
     * so the ScrollControl events will NOT fire.
     *
     * @type {Boolean}
     */
    enableSmoothAnchors: true,

    /**
     * Called before the snapping starts
     *
     * @param  {Node}   current
     * @param  {Node}   next
     * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
     *
     * @return {void}
     */
    onBeforeSectionSnap(current, next, scrollDirection) {
        //
    },

    /**
     * Called after the snapping completes
     *
     * @param  {Node}   current
     * @param  {Node}   previous
     * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
     *
     * @return {void}
     */
    onSectionSnapped(current, previous, scrollDirection) {
        //
    },
};