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