RXJS如何实现平滑滚动

Question

我正在尝试使用 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

Answer 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

RXJS如何实现平滑滚动

RXJS how to implement a smooth scroll

javascript

typescript

rxjs

smooth-scrolling