1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- 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,
- ) => {
- const startTime = Date.now();
- const offset = node[key];
- const gap = target - offset;
- const duration = 1000;
- let interrupt = false;
- const step = () => {
- const elapsed = Date.now() - startTime;
- const percentage = elapsed / duration;
- if (percentage > 1 || interrupt) {
- return;
- }
- node[key] = easingOutQuint(0, elapsed, offset, gap, duration);
- requestAnimationFrame(step);
- };
- step();
- return () => {
- interrupt = true;
- };
- };
- const isScrollBehaviorSupported =
- 'scrollBehavior' in document.documentElement.style;
- export const scrollRight = (node: Element, position: number) => {
- if (isScrollBehaviorSupported)
- node.scrollTo({ left: position, behavior: 'smooth' });
- else scroll(node, 'scrollLeft', position);
- };
- export const scrollTop = (node: Element) => {
- if (isScrollBehaviorSupported) node.scrollTo({ top: 0, behavior: 'smooth' });
- else scroll(node, 'scrollTop', 0);
- };
|