press-plus/press-schedule-tree/drag-helper.ts

易用的跨端组件库

import { SCROLL_SELECTOR } from './touch-helper';

let scrollStartY = 0;
let rAF: any;

const slideTimeThreshold = 300;
const slideLimitDistance = 200000;
let lastTime = 0;
let lastMove = 0;
let speed = 0;


export function getScrollStartY() {
  scrollStartY = document
    ?.querySelector(SCROLL_SELECTOR)?.scrollTop || 0;
}

export function scrollRelative(moveY: number, animation: boolean) {
  const ref = document
    ?.querySelector(SCROLL_SELECTOR);
  if (!ref) return;

  if (animation) {
    const distance = -moveY;
    const beginTime = Date.now();
    cancelAnimationFrame(rAF);
    rAF = window.requestAnimationFrame || ((func: Function) => setTimeout(func, 16));
    const frameFunc = () => {
    // 进度，500ms 内将页面滚动到顶部
      const progress = (Date.now() - beginTime) / 300;
      if (progress < 1) {
      // 根据进度修改 scrollTop 的值
        ref.scrollTop = scrollStartY + distance * progress;
        rAF(frameFunc);
      } else {
        ref.scrollTop = scrollStartY - moveY;
      }
    };
    rAF(frameFunc);
    return;
  }

  ref.scrollTop = scrollStartY + moveY ;
}


export function initScrollBounce(scrollInfo: Record<string, any>) {
  const time = new Date().getTime();
  speed = (scrollInfo.endY - lastMove) / (time - lastTime);
  lastMove = scrollInfo.endY;
  lastTime = time;
}


export function scrollBounce() {
  let slideDistance = 0;
  if (new Date().getTime() - lastTime < slideTimeThreshold) {
    slideDistance = speed * slideTimeThreshold / 2;
    slideDistance = Math.min(slideLimitDistance, slideDistance);
    slideDistance = Math.max(-slideLimitDistance, slideDistance);

    getScrollStartY();
    scrollRelative(slideDistance, true);
  }
}


/**
 * 获取赛程组对的高度
 * 24 标题高度，8 标题的 margin-bottom，100 两个队伍加 padding 高度，16 赛程组间隔
 * @param pairLength 赛程组对的个数
 * @returns 高度
 */
export function getPairBoxHeight(pairLength: number) {
  return 24 + 8 + 100 * pairLength + 16 * (pairLength - 1);
}