[CSS] 스크롤 이동 애니메이션 속성, scroll-behavior

스크롤 이동시 오직 css만 사용하여 스크롤 애니메이션을 구현할 수 있는 scroll-behavior에 대하여 알아봅니다.

# CSS scroll-behavior 속성

웹페이지에서 스크롤을 원하는 위치로 이동하는 방법으로 자바스크립트를 사용하거나 href="#id"의 방법을 사용합니다. 이때 스크롤이 바로 이동하지 않고 부드럽게 이동하게 하려면 어떻게 할까요? 제이쿼리의 메소드를 사용하거나 아니면 타이머 함수등을 사용할 수 있습니다.

하지만 더 간단한 방법이 필요한 경우 css를 사용할 수 있는데요. 바로 scroll-behavior 속성입니다. 이 css 속성은 스크롤 이동을 자연스럽게 바꿀 수 있는 값으로 설정할 수 있죠.

scroll-behavior: [ auto | inherit | smooth ]


위와 같이 세 가지 값으로 설정할 수 있습니다. 여기서 애니메이션처럼 부드러운 효과는 바로 smooth 값으로 설정합니다.

! scroll-behavior 값 smooth를 사용하는 이유

가장 큰 장점은 자바스크립트의 사용을 최소화 할 수 있습니다. 즉 스크롤 위치 이동만 스크립트를 이용하고 나머지 애니메이션 구현 부분은 css 한 줄로 가능하다는 점이죠. 매우 편리하고 실용적입니다. 다만 IE, Edge의 경우 아직은 지원되지 않는다는 점입니다.

@ scroll-behavior 속도 조절 이슈
그리고 꼭 알아두어야 할 사항이 있는데 바로 속도 조절이 어렵다는 점입니다. 실제로 동작해보면 조금 느린 감이 있을 수 있는데 속도 변경을 원할 경우 현재로서는 방법이 없어 네이티브로 구현하거나 아니면 라이브러리 등을 사용해야 하는 단점이 있습니다.

! CSS scroll-behavior 예제보기

그럼 간단한 예제를 만들어보고 어떻게 동작하는지 알아보겠습니다. 먼저 아래와 같이 링크를 하나 만들고 클릭할 경우 상단의 abc라고 적힌 위치로 이동하려고 합니다. 잘 보이도록 폰트 크기를 키웠습니다.

이제 css를 스크롤이 있는 html 태그 위치에 적용합니다.

여기까지 모든 과정이 끝났습니다. 과연 어떻게 동작하는지 다시 한 번 확인해보겠습니다. 아래의 구현된 모습에서 직접 Scroll이라는 버튼을 클릭해보세요. 클릭 후 자연스럽게 위로 이동할 것입니다.