🍃
Cher ami Smooth Scroll
Dependancies
Uses Signal
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