记录一个scrollTop的坑

记录一个scrollTop的坑

用的是requestAnimationFrame动画API，本地调试还正常。 但部署win7系统中出现了不能滚动，起初以为时requestAnimationFrame存在兼容问题。后来发现谷歌浏览器已经新版不兼容win7系统了。于是把scrollTop从+= 0.5 改成 += 1，居然能跑动了。

  //竖向滚动
  const verticalMarquee = () => {
    switch (vDirection) {
      case "top":
        if (domMw.current.scrollTop >= domMi.current.scrollHeight) {
          domMw.current.scrollTop = 0;
        } else {
          domMw.current.scrollTop += 1;
          // domMw.current.scrollTop += 0.5; 原代码
        }
        break;
      case "bottom":
        if (domMw.current.scrollTop <= 0) {
          domMw.current.scrollTop = domMi.current.scrollHeight;
        } else {
          domMw.current.scrollTop -= 1;
          // domMw.current.scrollTop -= 0.5; 原代码
        }
        break;
      default:
        break;
    }
    timerMarquee.current = requestAnimationFrame(verticalMarquee);
  };

  let fps = 30;
  let fpsInterval = 1000 / fps;
  let last = new Date().getTime(); //上次执行的时刻

  // 降低滚动速度
  const animate = () => {
    timerMarquee.current = requestAnimationFrame(animate);
    // 执行时的时间
    let now = new Date().getTime();
    let elapsed = now - last;
    if (elapsed > fpsInterval) {
      last = now - (elapsed % fpsInterval); //校正当前时间
      verticalMarquee();
    }
  }
  // 运动
  const runMarquee = () => {
    timerMarquee.current = requestAnimationFrame(animate);
  };

  //暂停
  const stopMarquee = () => {
    if (!timerMarquee.current) return;
    timerMarquee.current && cancelAnimationFrame(timerMarquee.current);
    timerMarquee.current = null;
  };