🍃
Cher ami Smooth Scroll

A smooth scroll library

Dependancies

Uses Signal

Summary

• Installation
• Simple usage
• React usage

Installation

$ npm i @cher-ami/smooth-scroll

Simple usage

Init smooth scroll

const container = querySelector("#scroll-container")
const scrollManager = new SmoothScrollManager(container)
scrollManager.init()

Declare scroll sections

<div data-scroll-section></div>

To be counted in scroll flow, each element in container must be declared

API

Members

Methods

React usage

Init

Wrap your app with <SmoothContainer />

export function App () {
  return (
      <div className={"root"}>
        <SmoothContainer>
          {/** ... */}
        </SmoothContainer>
      </div>
  )
}

Children will have access to scrollManager instance via ScrollContext

const scrollManager = useContext(ScrollContext)

API

Components :

• <SmoothContainer /> Wrap all your scroll content

Hooks :

• useScrollPosition Will be called every time scroll position changes
• useScrollSpeed Will be called every time scroll speed changes

SmoothContainer

Dispatch scrollContext to children and give them access to API

<SmoothContainer>
  {/** ... */}
</SmoothContainer>

Props :

none

useScrollPosition

Execute callback every time scroll position changes

useScrollPosition((scrollPosition: number) => {
  // Do something
}, []);

Parameters :

• callback (scrollPositionValue:number) => void Callback function to execute each time the scroll position changes
• dependancies any[] = [] Additional react dependancies

Returns :

nothing

useScrollSpeed

Execute callback every time scroll speed changes

useScrollSpeed((scrollSpeed: number) => {
  // Do something
}, []);

Parameters :

• callback (scrollSpeedValue:number) => void Callback function to execute each time the scroll speed changes
• dependancies any[] = [] Additional react dependancies

Returns :

nothing

Credits

Sam Phlix & Cher Ami