Wholepagescroll

Wholepagescroll is a React library to scroll all visible windows sections one by one.

You can scroll it vertical or horizontal. It can be a Slider or a simple page, but with complete scrolling from section to section.

Installation

You can use yarn to install wholepagescroll:

yarn add wholepagescroll

Or can use also npm:

npm install wholepagescroll

Usage

The library have 2 principal and unique components for now.

First, there is MainScroll, which is the principal and base component. It's behavior is similar to a copy of the body inside the navigator.

import { MainScroll } from "wholepagescroll";

export const ExampleComponent = () => {
  return (
    <>
      <MainScroll></MainScroll> //Inside the body tag, similar to it.
    </>
  );
};

The second is ChildScroll, it's behavior is similar a definitive section, each sections will have 100vh of height, so you can put all your page's content inside it, remember not overflow the section.

The first ChildScroll component should have always the "active" prop, it's to indicate the first child scroll. The others will not have it.

👀 Remember that, if you ignore this your app will crash 👀

import { MainScroll, ChildScroll } from "wholepagescroll";

export const ExampleComponent = () => {
  return (
    <>
      <MainScroll>
        <ChildScroll active></ChildScroll> //Your first section
        <ChildScroll></ChildScroll> //Your second section
        <ChildScroll></ChildScroll>
      </MainScroll>
    </>
  );
};

You can explain to ChildScroll where you want to scroll, so you can put a direction prop to indicates where, if horizontal or vertical.

Use it from the second ChildScroll component because the first should have vertical by default.

import { MainScroll, ChildScroll } from "wholepagescroll";

export const ExampleComponent = () => {
  return (
    <>
      <MainScroll>
        <ChildScroll active>//Your divs and all content here..</ChildScroll>
        <ChildScroll direction="horizontal">
          //Your divs and all content here..
        </ChildScroll>
        <ChildScroll direction="vertical">
          //Your divs and all content here..
        </ChildScroll>
      </MainScroll>
    </>
  );
};

ADVICE Don't use style inside the ChildScroll or MainScroll component, because it uses the inline style to make the effect. So, the recommendation is use new div or section inside ChildScroll with width 100% and height 100%.

Live Example

Example here

License

MIT

Codereggs with

Paypal