PanelScroller

A very simple JavaScript library for move around the page using the viewport height size.

Install

Using npm:

npm install panelscroller 

Use

First, import the package

import { PanelScrollManager } from 'panelscroller/panelscroller'

We define a panel as a compoent with height size as window viewport size. Then, a n-panel will be the (n-1)-th viewport height size after the start of the page.

To go to some panel

const manager = new PanelScrollManager();

manager.GoToPanel(0); // go to the first panel
manager.GoToPanel(1); // go to the second panel
manager.GoToPanel(2); // go to the third panel
//...
manager.GoToPanel(n); // go to the (n-1)-th panel

Set a default behavior

const manager = new PanelScrollManager();

manager.SetBehavior('instant');
manager.SetBehavior('smooth');
manager.SetBehavior('auto');

Using a specific behavior only one time

const manager = new PanelScrollManager();

manager.GoToPanelWithBehavior(1, 'instant');
manager.GoToPanelWithBehavior(1, 'smooth');
manager.GoToPanelWithBehavior(1, 'auto');

You can get the deepest reached panel, this is calculated every time the scroll event is detected.

const manager = new PanelScrollManager();

manager.SetPanelCalculation(); // Activate this feature.
manager.DeepestReachedPanel() // Get the panel number.