スクロール量で背景色を変化させるJSコード生成ツール

<div id="scroll-container">
	<div class="spacer"></div>
</div>

#scroll-container {
	width: 40%;
	min-width: 180px;
	height: 500px;
	overflow-y: scroll;
	border: 2px solid #333;
	position: relative;
	background-color: {{color0}};
	transition: background-color {{duration}}s;
}

.spacer {
	width: 100%;
	height: 5000px;
}

const container = document.querySelector('#scroll-container');
let currentIndex = -1; // 現在の色インデックスを保持
	
container.addEventListener("scroll" , () => {
	const scroll = container.scrollTop;
	// 色の配列
	const colors = ['{{color0}}', '{{color1}}', '{{color2}}', '{{color3}}', '{{color4}}'];

	// 間隔設定
	const interval = {{interval}};

	// 負のスクロール値（バウンス等）対策
	const safeScroll = Math.max(0, scroll);
	
	// スクロール量からインデックスを計算
	const index = Math.floor(safeScroll / interval);

	// 配列の長さで割った余りを使うことでループさせる
	const colorIndex = index % colors.length;

	// 色が変わるタイミングのみ適用する
	if (colorIndex !== currentIndex && colors[colorIndex]) {
		console.log(index,colorIndex);
		container.style.backgroundColor = colors[colorIndex];
		currentIndex = colorIndex;
	}
});