CSS를 이용하여 앵커 클릭시 부드러운 스크롤을 구현하는 방법

페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지...

 

그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠?

 

이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다.

 

 

 

1. 기존 방식

기존에는 jQuery를 이용하여, 특정 엘리먼트의 상단으로부터의 offset을 구하고 animation을 통하여 구현하는 방법이 많이 사용된 것으로 알고 있습니다.

 

대충 다음과 같은 방식이죠?

$('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
         ......
        });

 

하지만 scroll-behavior라는 CSS 속성이 추가되면서, javaScript의 도움 없이 CSS 만으로 스크롤 기능을 구현할 수 있게 되었습니다.

 

2. CSS only scroll

CSS만으로 가능하다면 이전의 방식보다 훨씬 쉽고 간단하겠죠? 최근 CSS에서는 아래와 같은 속성을 제공합니다. 이 속성을 이용하면 페이지 내의 앵커 링크들 사이에 부드럽게 스크롤되는 애니메이션을 구현할 수 있습니다.

scroll-behavior:smooth;

 

scroll-behavior의 기본적인 파라미터는 다음의 2가지가 있습니다.

• auto: 링크 타겟으로 즉시 이동합니다.
• smooth: 브라우저에 설정된 시간 설정을 기초로 링크 이동을 부드럽게 진행합니다. 

 

참고로 이동 속도 등은 브라우저에 정의되어 있는 값으로 동작하는 것 같습니다. 아쉽게도 변경할 수는 없는 것 같긴 하지만, 브라우저 제공 업체에서 알아서 최적의 타이밍으로 해놨을 테니 신경 쓰지 않으려고 합니다 ^^;

 

A. 샘플 코드

해당 내용은 아래의 코드펜 예제를 참고해보세요. (코드도 확인할 수 있습니다)

 

See the Pen Smooth Anchor Scroll by showtime (@paperblock) on CodePen.

 

 

 

 

아마 대부분의 브라우저에서는 부드럽게 잘 이동이 될 것으로 생각됩니다.

 

위의 예제는 container 안에서 smooth scroll이 동작하도록 한 예제입니다만, 가끔 container의 scroll 속성 등에 따라서 잘 동작 안 하는 경우도 있습니다. 이것저것 신경 쓰기 싫고, 기존 코드 구조 그대로인 상태에서 부드러운 스크롤을 구현하기를 원한다면, 다음과 같이 html 전체에 대해서 설정하면 웬만하면 잘 동작합니다.

 

html { 
  scroll-behavior: smooth; 
} 

 

B. "prefers-reduced-motion"

애니메이션을 싫어하는 사용자도 있겠죠? (저도 사실 스크롤 효과보다는 그냥 바로 해당 앵커 위치로 뛰어 버리는 걸 선호하는 편입니다;;;)

 

최근에는 애니메이션을 축소하거나 없애는 것을 원하는 사용자의 요구가 증가함에 따라 운영체제에서 애니메이션 동작 축소 기능을 제공하게 되었다고 하네요. 일부 웹브라우저에서는 이러한 운영체제의 설정에 반응하여, 웹 페이지에서 애니메이션 동작을 축소해주는 prefers-reduced-motion 미디어 쿼리 속성을 제공하고 있습니다.

 

자세한 내용은 아래 링크를 참고해주세요.

저사양 디바이스와 웹접근성을 위한 애니메이션 동작 줄이기 미디어쿼리 사용하기: prefers-reduced-

 

운영체제의 설정을 반영하여 smooth scroll 기능이 동작하게 하려면, 다음과 같은 방식으로 애니메이션 동작 축소를 위한 미디어 쿼리를 사용하면 됩니다.

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

 

3. 지원 브라우저는?

사실상 단종 단계인 Internet Explorer를 제외하고는 거의 모든 브라우저에서 scroll-behavior 속성을 제공하는 것으로 되어 있습니다. 

 

Reference: https://developer.mozilla.org/ko/docs/Web/CSS/scroll-behavior

 

하지만 사파리나 아이폰의 경우 현재는 experimental feature로 기본적으로는 disable 되어있습니다. 아이폰 같은 경우는 "설정 > Safari > 고급 > Experimental Features > CSSOM View Smooth Scrolling" 플래그를 on 시켜줘야 동작하는데요... 직접 테스트해보니 뭔가 엄청나게 느리게 스크롤되고 있습니다 ㅡㅡ;

 

사실 일반 사용자가 여기 까지 들어와서 플래그를 바꿀 사람은 없으므로, 아쉽게도 애플 쪽에서는 아직 지원하지 않는 것으로 보는 것이 맞을 것 같습니다.

 

맺음말

이번 글에서는 CSS의 scroll-behavior에 대해서 살펴봤습니다. 이제 IE에 대한 의존성은 거의 사라져 가는 분위기이므로 굳이 복잡한 스크롤 기능을 구현하지 말고 CSS로만 설정해보는 것도 나쁘지 않을 것 같습니다. 다만 애플 쪽에서도 어서 기본 항목으로 변경되었으면 합니다.