The best vanilla alternative to full-page scroll-controlling javascript plugins
npm install swinch> There are no runtime dependencies!!!
> The build is dependent on the fantastic zenscroll plugin!
1. npm install swinch, bower install swinch, yarn add swinch
2. Include dist/swinch.js or swinch.min.js (uses UMD)
1. After the DOM loads, call swinch.init([sections][, options])
2. 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.
``js
{
/**
* The duration of the snap, in milliseconds.
*
* This can be overridden with the attribute "swinch-duration" on a section.
* ex.
*
* @type {Number}
*/
duration: 500,
/**
* The offset of the snapping target.
*
* This can be overridden with the attribute "swinch-offset" on a section.
* ex.
*
* @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:
*
* @return {void}
*/
onBeforeSnap: function onBeforeSnap(currentSection, nextSection, scrollDirection) {
//
},
/**
* Called after the snapping completes
*
* @param {Node} currentSection
* @param {Node} previousSection
* @param {Object} scrollDirection {isUp:
*
* @return {void}
*/
onSnapped: function onSnapped(currentSection, previousSection, scrollDirection) {
//
}
}
`
Checkout test.html` for an example.