生のJavaScript（jQuery不使用）でscrollLeftをアニメーション付きでスライドさせたい

Question

前提・実現したいこと

生のJavaScript（jQuery不使用）でscrollLeftをアニメーションで付きスライドさせたいです。

以下の記事を参考にしました。
https://ics.media/entry/17183/

しかし、今のコードだと、

• ページ読み込み時にanima()を実行するとスライドする。
• addEventListenerのclickでanima()を実行するとスライドしない。

という状態です。

この原因がわからなくて困っています。

---

作成中のサンプルコード一式
https://codepen.io/dadada-dadada/pen/NWNzmEO?editors=1111

該当のソースコード

function anima(_start, _end, _time){
	const target = document.getElementById("target"); // アニメーションの対象
	const start = _start;
	const end = _end;
	const diff = end - start; // 変化量
	const time = _time; // 変化にかける時間 (ミリ秒)

	// アップデートを実行する
	requestAnimationFrame(update);

	function update(timestamp) {
		// 進捗率を算出
		progress = timestamp / time;

		// 進捗率が100%を超えないよう丸める
		progress = Math.min(progress, 1);

		// 値を算出し反映する
		const result = start + diff * progress; // X座標

		target.scrollLeft = result

		// 進捗が1未満の場合はアップデートを再実行する
		if (progress < 1) {
			requestAnimationFrame(update);
		}

	}
}
anima(0, 300, 500)  // スライドする

document.getElementById("btn").addEventListener('click', () => {
  anima(0, 300, 500)  // スライドしない
})

Answer 1

クリックするたびに横スクロールさせたい場合、スクロール開始位置の情報が必要です。

function anima(_start, _end, _time){
    const target = document.getElementById("target"); // アニメーションの対象
    const now    = target.scrollLeft // 現在のスクロール位置を取得 
    const start  = _start + now;     // 現在位置分スタート位置をずらす
    const end    = _end   + now;     // 現在位置分ゴール位置をずらす
    /* 省略*/