2023-05-10 02:02:12 +09:00
|
|
|
const easingOutQuint = (
|
|
|
|
x: number,
|
|
|
|
t: number,
|
|
|
|
b: number,
|
|
|
|
c: number,
|
|
|
|
d: number
|
|
|
|
) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
|
|
|
|
const scroll = (
|
|
|
|
node: Element,
|
|
|
|
key: 'scrollTop' | 'scrollLeft',
|
|
|
|
target: number
|
|
|
|
) => {
|
2017-06-04 08:39:38 +09:00
|
|
|
const startTime = Date.now();
|
2023-05-10 02:02:12 +09:00
|
|
|
const offset = node[key];
|
|
|
|
const gap = target - offset;
|
|
|
|
const duration = 1000;
|
|
|
|
let interrupt = false;
|
2017-06-04 08:39:38 +09:00
|
|
|
|
|
|
|
const step = () => {
|
2023-05-10 02:02:12 +09:00
|
|
|
const elapsed = Date.now() - startTime;
|
2017-06-04 08:39:38 +09:00
|
|
|
const percentage = elapsed / duration;
|
|
|
|
|
|
|
|
if (percentage > 1 || interrupt) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-08-05 01:57:46 +09:00
|
|
|
node[key] = easingOutQuint(0, elapsed, offset, gap, duration);
|
2017-06-04 08:39:38 +09:00
|
|
|
requestAnimationFrame(step);
|
|
|
|
};
|
|
|
|
|
|
|
|
step();
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
interrupt = true;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2023-05-10 02:02:12 +09:00
|
|
|
const isScrollBehaviorSupported =
|
|
|
|
'scrollBehavior' in document.documentElement.style;
|
2019-06-30 01:32:06 +09:00
|
|
|
|
2023-05-10 02:02:12 +09:00
|
|
|
export const scrollRight = (node: Element, position: number) =>
|
|
|
|
isScrollBehaviorSupported
|
|
|
|
? node.scrollTo({ left: position, behavior: 'smooth' })
|
|
|
|
: scroll(node, 'scrollLeft', position);
|
|
|
|
export const scrollTop = (node: Element) =>
|
|
|
|
isScrollBehaviorSupported
|
|
|
|
? node.scrollTo({ top: 0, behavior: 'smooth' })
|
|
|
|
: scroll(node, 'scrollTop', 0);
|