@cher-ami/smooth-scroll NPM

Dependancies

Summary

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

smooth react

@solid-js/signal

@infinitebrahmanuniverse/nolb-_cher @everything-registry/sub-chunk-168 @zalastax/nolb-_cher

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago