|
/* |
|
Smooth scroller |
|
|
|
Just add any scrollable container inside this component. |
|
|
|
Dependencies: |
|
|
|
This example depends on GSAP to perform scroll y position across many browsers. It could |
|
be replaced by any function that resolves scroll position for all browsers to cover with. |
|
Taiwindcss classes has been used here too. It could be replaced with respective styles. |
|
|
|
MIT License |
|
Copyright (c) 2020 Jan Cassio |
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
|
of this software and associated documentation files (the "Software"), to deal |
|
in the Software without restriction, including without limitation the rights |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
copies of the Software, and to permit persons to whom the Software is |
|
furnished to do so, subject to the following conditions: |
|
The above copyright notice and this permission notice shall be included in all |
|
copies or substantial portions of the Software. |
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|
SOFTWARE. |
|
*/ |
|
|
|
import gsap from 'gsap' |
|
import { useEffect, useRef } from 'react' |
|
|
|
type Props = { children?: ReactNode } |
|
|
|
export default function SmoothScroller(props: Props): JSX.Element { |
|
const { children } = props |
|
const container = useRef(null) |
|
|
|
useEffect(() => { |
|
const html = document.documentElement |
|
const body = document.body |
|
const ease = 0.1 |
|
const target = container.current |
|
|
|
let y = 0 |
|
let resizeRequest = 1 |
|
let scrollRequest = 0 |
|
let requestId: number |
|
|
|
gsap.config({ force3D: true }) |
|
|
|
function render(): void { |
|
requestId = requestAnimationFrame(update) |
|
} |
|
|
|
function update(): void { |
|
resizeHeightIfNeeded() |
|
const scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0 |
|
|
|
y += (scrollY - y) * ease |
|
gsap.set(target, { y: -y }) |
|
requestId = scrollRequest > 0 ? requestAnimationFrame(update) : null |
|
scrollRequest-- |
|
} |
|
|
|
function bodyResize(): void { |
|
const height = target.clientHeight |
|
body.style.height = `${height}px` |
|
} |
|
|
|
function resizeHeightIfNeeded(): void { |
|
const resized = resizeRequest > 0 |
|
|
|
if (resized) { |
|
bodyResize() |
|
resizeRequest = 0 |
|
} |
|
} |
|
|
|
function onScroll(): void { |
|
scrollRequest++ |
|
|
|
if (!requestId) { |
|
render() |
|
} |
|
} |
|
|
|
function onResize(): void { |
|
resizeRequest++ |
|
if (!requestId) { |
|
render() |
|
} |
|
} |
|
|
|
window.focus() |
|
window.addEventListener('resize', onResize) |
|
document.addEventListener('scroll', onScroll) |
|
document.addEventListener('wheel', onScroll) |
|
|
|
return () => { |
|
window.addEventListener('resize', onResize) |
|
document.addEventListener('scroll', onScroll) |
|
document.addEventListener('wheel', onScroll) |
|
} |
|
}, []) |
|
|
|
return ( |
|
<div className="viewport overflow-hidden fixed inset-0 w-full h-full"> |
|
<div ref={container}>{children}</div> |
|
</div> |
|
) |
|
} |