RXJS如何实现平滑滚动答案

【问题标题】：RXJS how to implement a smooth scrollRXJS如何实现平滑滚动
【发布时间】：2019-07-18 20:16:40
【问题描述】：

我正在尝试使用 RXJS 实现平滑滚动功能。

以下代码平滑滚动，但未按预期滚动。比达到目标所需的时间要长得多。

知道怎么解决吗？

const scrollableEl = document.getElementById('view');
const btn = document.getElementById('testBtn');
btn.addEventListener('click', () => {
  scrollTo(scrollableEl, 1000, 300);
});

function scrollTo(scrollableEl: HTMLElement, point: number, duration: number) {

  timer(0, 20, animationFrame).pipe(
    map((elapsedTime: number) => {
      const delta = point - scrollableEl.offsetTop;
      return {
        top: easeInOutQuad(elapsedTime, scrollableEl.offsetTop, delta, duration),
        elapsedTime
      };
    }),
    tap((target) => {
      console.log('scrollTo: ', target);
      scrollableEl.scrollTop = target.top;
    }),
    // Stop timer
    takeWhile((target: any) => target.elapsedTime < duration)
  ).subscribe();
}

这是一个复制品：https://stackblitz.com/edit/rxjs-35vjhu

【问题讨论】：

标签： javascript typescript rxjs smooth-scrolling

【解决方案1】：

timer 函数不会发出经过时间，它的输出是从 0：0、1、2、3 等开始的数字序列。我认为您需要自己测量经过时间：

const startTime = new Date().getTime();
timer(0, 20, animationFrame).pipe(
  map(() => {
    const elapsedTime = new Date().getTime() - startTime;
    const delta = point - scrollableEl.offsetTop;
    return {
      top: easeInOutQuad(elapsedTime, scrollableEl.offsetTop, delta, duration),
      elapsedTime
    };
  }),
  tap((target) => {
    console.log('scrollTo: ', target);
    scrollableEl.scrollTop = target.top;
  }),
  // Stop timer
  takeWhile((target: any) => target.elapsedTime < duration),
).subscribe();

这是更新示例：https://stackblitz.com/edit/rxjs-dr44gy

【讨论】：

您可以将new Date().getTime(); 替换为Date.now();。稍微整洁一点。