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