File size: 4,957 Bytes
df25c67 a0ea69f df25c67 a0ea69f df25c67 a0ea69f 5db834e a0ea69f df25c67 a0ea69f df25c67 a0ea69f df25c67 a0ea69f df25c67 a0ea69f df25c67 a0ea69f df25c67 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
import { useRef, useCallback } from 'react';
interface ScrollOptions {
duration?: number;
easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier';
cubicBezier?: [number, number, number, number];
bottomThreshold?: number;
}
export function useSnapScroll(options: ScrollOptions = {}) {
const {
duration = 800,
easing = 'ease-in-out',
cubicBezier = [0.42, 0, 0.58, 1],
bottomThreshold = 50, // pixels from bottom to consider "scrolled to bottom"
} = options;
const autoScrollRef = useRef(true);
const scrollNodeRef = useRef<HTMLDivElement>();
const onScrollRef = useRef<() => void>();
const observerRef = useRef<ResizeObserver>();
const animationFrameRef = useRef<number>();
const lastScrollTopRef = useRef<number>(0);
const smoothScroll = useCallback(
(element: HTMLDivElement, targetPosition: number, duration: number, easingFunction: string) => {
const startPosition = element.scrollTop;
const distance = targetPosition - startPosition;
const startTime = performance.now();
const bezierPoints = easingFunction === 'cubic-bezier' ? cubicBezier : [0.42, 0, 0.58, 1];
const cubicBezierFunction = (t: number): number => {
const [, y1, , y2] = bezierPoints;
/*
* const cx = 3 * x1;
* const bx = 3 * (x2 - x1) - cx;
* const ax = 1 - cx - bx;
*/
const cy = 3 * y1;
const by = 3 * (y2 - y1) - cy;
const ay = 1 - cy - by;
// const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t;
const sampleCurveY = (t: number) => ((ay * t + by) * t + cy) * t;
return sampleCurveY(t);
};
const animation = (currentTime: number) => {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const easedProgress = cubicBezierFunction(progress);
const newPosition = startPosition + distance * easedProgress;
// Only scroll if auto-scroll is still enabled
if (autoScrollRef.current) {
element.scrollTop = newPosition;
}
if (progress < 1 && autoScrollRef.current) {
animationFrameRef.current = requestAnimationFrame(animation);
}
};
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
}
animationFrameRef.current = requestAnimationFrame(animation);
},
[cubicBezier],
);
const isScrolledToBottom = useCallback(
(element: HTMLDivElement): boolean => {
const { scrollTop, scrollHeight, clientHeight } = element;
return scrollHeight - scrollTop - clientHeight <= bottomThreshold;
},
[bottomThreshold],
);
const messageRef = useCallback(
(node: HTMLDivElement | null) => {
if (node) {
const observer = new ResizeObserver(() => {
if (autoScrollRef.current && scrollNodeRef.current) {
const { scrollHeight, clientHeight } = scrollNodeRef.current;
const scrollTarget = scrollHeight - clientHeight;
smoothScroll(scrollNodeRef.current, scrollTarget, duration, easing);
}
});
observer.observe(node);
observerRef.current = observer;
} else {
observerRef.current?.disconnect();
observerRef.current = undefined;
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
}
},
[duration, easing, smoothScroll],
);
const scrollRef = useCallback(
(node: HTMLDivElement | null) => {
if (node) {
onScrollRef.current = () => {
const { scrollTop } = node;
// Detect scroll direction
const isScrollingUp = scrollTop < lastScrollTopRef.current;
// Update auto-scroll based on scroll direction and position
if (isScrollingUp) {
// Disable auto-scroll when scrolling up
autoScrollRef.current = false;
} else if (isScrolledToBottom(node)) {
// Re-enable auto-scroll when manually scrolled to bottom
autoScrollRef.current = true;
}
// Store current scroll position for next comparison
lastScrollTopRef.current = scrollTop;
};
node.addEventListener('scroll', onScrollRef.current);
scrollNodeRef.current = node;
} else {
if (onScrollRef.current && scrollNodeRef.current) {
scrollNodeRef.current.removeEventListener('scroll', onScrollRef.current);
}
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
scrollNodeRef.current = undefined;
onScrollRef.current = undefined;
}
},
[isScrolledToBottom],
);
return [messageRef, scrollRef] as const;
}
|