You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

32 lines
1020 B

  1. const easingOutQuint = (x, t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
  2. const scroll = (node, key, target) => {
  3. const startTime = Date.now();
  4. const offset = node[key];
  5. const gap = target - offset;
  6. const duration = 1000;
  7. let interrupt = false;
  8. const step = () => {
  9. const elapsed = Date.now() - startTime;
  10. const percentage = elapsed / duration;
  11. if (percentage > 1 || interrupt) {
  12. return;
  13. }
  14. node[key] = easingOutQuint(0, elapsed, offset, gap, duration);
  15. requestAnimationFrame(step);
  16. };
  17. step();
  18. return () => {
  19. interrupt = true;
  20. };
  21. };
  22. const isScrollBehaviorSupported = 'scrollBehavior' in document.documentElement.style;
  23. export const scrollRight = (node, position) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position);
  24. export const scrollTop = (node) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0);