[Javascript] 스크롤에 따른 배경색 변경

index.js

//index.js
var colors = [
    '#F2B705',
    '#F25C05',
    '#0388A6',
    '#0E5929',
    '#F272A1',
]

var container = document.getElementById('container');

var text = document.getElementById('value');	//Scroll Value
var color = document.getElementById('color');	//Color Code

//Wheel Event
container.onwheel = changeBgColor;

var colorIndex = 0;
var scrollValue = 0;	//get mouse wheel value

function changeBgColor(e) {
    scrollValue += e.deltaY * 0.01;
    text.textContent = Math.floor(scrollValue);

    console.log(scrollValue);

    //위로 Scroll
    if (scrollValue > 10) {
        colorIndex += 1;
        if (colorIndex > colors.length-1) colorIndex = 0;
        color.textContent = colors[colorIndex];
        container.style.backgroundColor = colors[colorIndex];	//배경색 변경
        scrollValue = 0;	//스크롤 값 초기화
    }

    //아래로 Scroll
    if (scrollValue < -10) {
        colorIndex -= 1;
        if (colorIndex < 0) colorIndex = colors.length-1;
        color.textContent = colors[colorIndex];
        container.style.backgroundColor = colors[colorIndex];	//배경색 변경
        scrollValue = 0;	//스크롤 값 초기화
    }
   	e.preventDefault(); // disable the actual scrolling
}

스크롤 동작이 이뤄질 때마다 e.deltaY 값을 누적시킵니다.
위로 스크롤 시 양수 값을, 아래로 스크롤 시 음수 값을 가집니다.

누적 값이 일정 수준이 넘어가면 colorIndex 값을 증가시켜 colors 배열의 다음 색으로 배경색을 변경합니다.

그리고 부드러운 트랜지션을 위해 css 코드를 추가합니다.

transition: background-color 0.8s;

Date.now()

만약 스크롤을 빠르게 넘긴다면, 한번에 배경 색이 여러번 바뀌게 됩니다.
괜찮을 수도 있지만 저는 정신이 없기도 하고 좀 더 안정적으로 동작하게 하고 싶어서 추가로 Date()를 사용했습니다.

현재 시간을 나타내는 변수 dateNow를 정의하고

var dateNow = Date.now();

스크롤 값이 들어오면 흐른 시간을 비교하고, 일정 시간이 넘어야만 새롭게 배경 색깔을 변경합니다.

timePassed = Date.now() - dateNow;
if (timePassed > 500) {
	...
}

배경 색이 바뀌는 순간에 다시 현재 시간을 저장합니다.

dateNow = Date.now();

전체 코드 보기👀