RAF
-
스크롤을 최적화하고 싶은데..Web/자바스크립트 2022. 12. 30. 17:47
"스크롤 애니메이션이 뭔가 이상해요 😭" 스크롤 애니메이션을 고쳐달라는 요구사항이 새로 들어왔다. 정확히 말하면 애니메이션은 아니고, 스크롤할 때 동작하는 간단한 로직에 문제가 있었다. 문제가 된 스크롤 동작은 fixed 상태인 특정 컴포넌트가 스크롤로 인해 지정된 범위를 벗어나려고 하면 해당 범위의 끄트머리를 넘어서지 않도록 위치를 고정해주는 동작이었다. 사실 요 동작 자체만으로는 문제가 없었지만, 여기에 throttle이 더해지자 문제가 생겼다. 원래는 스크롤을 할 때마다 컴포넌트의 위치를 지속적으로 감시하면서 위치를 고정시켜줘야 하는데, throttle로 인해 로직이 띄엄띄엄 실행되는 바람에 감시를 못하고 놓치는 구간이 발생했다. 그래서 컴포넌트가 범위 밖으로 튀어나갔다가 다시 들어오는 현상이 나타..