@fe6/water-pro/es/_util/hooks/use-scroll-to.js

An enterprise-class UI design language and Vue-based implementation

/** @format */
import { isFunction, isUndefined } from '@fe6/shared';
import { ref, unref } from 'vue';

var easeInOutQuad = function easeInOutQuad(t, b, c, d) {
  t /= d / 2;

  if (t < 1) {
    return c / 2 * t * t + b;
  }

  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
};

var move = function move(el, amount) {
  el.scrollTop = amount;
};

var position = function position(el) {
  return el.scrollTop;
};

export function useScrollTo(_ref) {
  var el = _ref.el,
      to = _ref.to,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 500 : _ref$duration,
      callback = _ref.callback;
  var isActiveRef = ref(false);
  var start = position(el);
  var change = to - start;
  var increment = 20;
  var currentTime = 0;
  duration = isUndefined(duration) ? 500 : duration;

  var animateScroll = function animateScroll() {
    if (!unref(isActiveRef)) {
      return;
    }

    currentTime += increment;
    var val = easeInOutQuad(currentTime, start, change, duration);
    move(el, val);

    if (currentTime < duration && unref(isActiveRef)) {
      requestAnimationFrame(animateScroll);
    } else {
      if (callback && isFunction(callback)) {
        callback();
      }
    }
  };

  var run = function run() {
    isActiveRef.value = true;
    animateScroll();
  };

  var stop = function stop() {
    isActiveRef.value = false;
  };

  return {
    start: run,
    stop: stop
  };
}