@cher-ami/smooth-scroll

🍃
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

Member	Type	Description
progress	number	Percentage of scroll progress
scrollPosition	number	Current scroll position in px (lerped value)
scrollDestination	number	Scroll destination in px (raw value)
scrollLength	number	Total scrollable length
scrollSpeed	number	Current speed

Methods

Method	Params	Description
init()	none	Initialise scroll
scrollToTop(speed?)	speed: number = 200	Scroll to position 0
scrollToBottom(speed?)	speed: number = 200	Scroll to max position
scrollTo(target)	target: number | HTMLDivElement	Scroll to destination in px or given HTML element
disable()	none	Disable scroll
enable()	none	Enable scroll
kill()	none	Cancel RAF and remove listeners
refresh()	none	Update scroll sections and scroll length, should be called if the content of the scroll container has changed (ex: after page transitions)

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