demo.mov
flickable-scroll is a flickable web scroller, which handles only scroll jobs. In other words, you can be free to write layout and style and then you just pass scroller options based on it. Let's see examples below.
This is an example template. Note the changes of options and style in each example.
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const current = ref.current;
if (current == null) {
return;
}
const options: ScrollerOptions = {
/* ... */
};
const scroller = new FlickableScroller(current);
return () => scroller.destroy();
}, []);
const style: CSSProperties = {
/* ... */
};
return (
<div style={{ width: "100vw", height: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}>
<div
ref={ref}
style={{
width: 800,
height: 800,
position: "fixed",
overflow: "hidden",
...style,
}}
>
<div style={{ backgroundColor: "lavender", fontSize: 50 }}>Scroll Top</div>
{Array.from({ length: 2 }).map((_, index) => (
<Fragment key={index}>
<div style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: "pink" }} />
<div style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: "skyblue" }} />
<div style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: "lavender" }}></div>
</Fragment>
))}
<div style={{ backgroundColor: "pink", fontSize: 50 }}>Scroll Bottom</div>
</div>
</div>
);const options = {
direction: "y",
};const style = {};2023-07-21.3.42.02.mov
const options = {
direction: "y",
reverse: true,
};const style = {
display: "flex",
flexDirection: "column",
justifyContent: "flex-end",
};2023-07-21.3.42.35.mov
const options = {
direction: "x",
};const style = {
display: "flex",
};2023-07-21.3.45.17.mov
const options = {
direction: "x",
reverse: true,
};const style = {
display: "flex",
justifyContent: "flex-end",
};2023-07-21.3.46.05.mov
const options = {
direction,
reverse,
onScrollStart,
onScrollMove,
onScrollEnd,
};
const scroller = new FlickableScroller(container, options);
scroller.lock();
scroller.unlock();
scroller.destory();- Parameters of
FlickableScroller:container:HTMLElement- Required
- A scroll container element.
- options
- Optional
- properties
direction:"x" | "y"- Optional
- Defaults to
"y" - A scroll direction
reverse:boolean- Optional
- Defaults to
false - If set to true, scroll direction will be reversed.
onScrollStart:(e: ScrollEvent) => void- Optional
- This function will fire when a user starts to scroll
onScrollMove:(e: ScrollEvent) => void- Optional
- This function will fire when a user is scrolling
onScrollEnd:(e: ScrollEvent) => void- Optional
- This function will fire when a user finishes to scroll
- Methods of
FlickableScroller:lock():() => void- This method locks scroll of the scroller.
unlock():() => void- This method unlocks scroll of the scroller.
destroy():() => void- This method destory the scroller. All event handlers will be removed, and all animations will be stopped.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent