How to make use of it:

1. Install and import the panelSnap with NPM.

# NPM
$ npm i panelsnap --save

import PanelSnap from 'panelsnap';

2. Or include the panelSnap’s JavaScript on the web page.

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- panelSnap Plugin -->
<script src="/path/to/lib/panelsnap.umd.js"></script>

3. Create a set of panels you need to scroll.

<section>
  Section 1
</section>

<section>
  Section 2
</section>

<section>
  Section 3
</section>

...

4. Make the content sections full web pages.

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
}

5. Enable the plugin and completed it.

new PanelSnap();

5. Possible choices to customize the plugin.

new PanelSnap({

    // parent container
    container: document.body,

    // panel selector
    panelSelector: '> section',

    // threshold
    directionThreshold: 50,

    // scroll delay
    delay: 0,

    // duration in milliseconds
    duration: 300,

    // easing function
    easing: function(t) { return t }
    
});

6. API strategies.

const instance = new PanelSnap();

// scroll to a specific element
instance.snapToPanel(element);

// destroy the instance
instance.destroy();

. Event handlers.

const instance = new PanelSnap();

instance.on('activatePanel', function(){
  // do something
})

instance.on('snapStart', function(){
  // do something
})

instance.on('snapEnd', function(){
  // do something
})

instance.on('snapStop', function(){
  // do something
})

OPTIONS EXPLAINED

container
(element) The (scrolling) container that contains the panels.
panelSelector
(string) The css selector to find the panels. (scoped within the container).
directionThreshold
(interger) The amount of pixels required to scroll before the plugin detects a direction and snaps to the next panel.
delay
(integer) The amount of miliseconds the plugin pauzes before snapping to a panel.
duration
(integer) The amount of miliseconds in which the plugin snaps to the desired panel.
easing
(function) An easing function specificing the snapping motion.

API

on([string] eventName, [function] callbackFunction(panel))
Subscribe to a specific event with your own function. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction is a function that gets called with the panel that is the subject of the event.
off([string] eventName, [function] callbackFunction(panel))
Unsubscribe one of your subscriptions. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction is the function that was used to subscribe to the event.
snapToPanel([DOM Element] panel)
Trigger a snap to a panel. Where panel is one of the panels within the container.
destroy()
Destroy the panelsnap instance and clear all state & eventlisteners. This allows for a new PanelSnap instance to be created on the same container if so desired.

Smooth Scroll Snapping, PanelSnap Plugin/Github, smoothscroll js demo, full page scroll jquery plugin

See Demo And Download