제이쿼리 스크립트 도움 없이 CSS 만으로 부드러운 링크 스크롤 구현하기
제목만 보면 무슨 뜻인지 이해가 잘 되지 않을 수 있으니 간단한 예를 들어보겠습니다. 홈페이지 제작 시 오른쪽 하단에는 보통 TOP 버튼이 만들어져 있습니다. 대부분의 브라우저에서는 이 TOP버튼을 누르면 페이지의 가장 위로 부드럽게 스크롤되며 이동됩니다. 바로 이것입니다. 부드럽게 스크롤이 이동되는 TOP버튼에는 아마 대부분 제이쿼리 스크립트가 심어져 있을 겁니다. 친효스킨만해도 아래의 코드가 스킨에 들어있습니다.
$(".rgyTop").click(function () {
$('html, body').animate({
scrollTop: 0
}, 500);
return false;
});때문에 스크립트를 사용하려면 당연히 해당 스크립트(제이쿼리-jQuery) CND 주소를 <head> 안에 넣어줘야만 동작합니다. 사실 엄밀히 따지면 TOP버튼을 누르면 바로 상단으로 이동되게 설계만 해두면 되는 문제인데 단지 부드럽게 이동하는 애니메이션을 구현하고자 이 코드를 사용하는 것입니다. 고작 부드러운 스크롤을 만들어주기 위해서 불필요한 제이쿼리를 한번 더 사용을 해야 합니다. 스크립트에 대해 잘 모르는 제 입장에서는 번거롭기 그지없으며 어렵습니다.
그런데 스크립트의 도움 없이 CSS만으로 부드러운 스크롤이 구현되는 사실을 최근에 알게 되었습니다. 딱 한 줄만 있으면 해결됩니다. 이 사실을 알고 나니까 상당히 반가우면서도 허망했습니다. 진작 알았다면 저 방법을 사용하지 않았을테니까요. 백문이 불여일견! 바로 예시로 살펴보겠습니다.
미리보기
See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.
a태그를 이용해서 두 개의 커다란 박스를 만들었습니다. 각 박스를 클릭해 보시기 바랍니다. 원래대로라면 휙! 휙! 하고 링크된 위치로 옮겨져야 하지만 CSS의 단 하나의 코드 영향을 받아서 저렇게 부드럽게 스크롤 애니메이션이 구현되고 있습니다. 대체 뭣 땀시 저렇게 되는 걸까요?
CSS
html {
scroll-behavior: smooth;
}바로 이 부분입니다. scroll-behavior: smooth; 라는 옵션 때문입니다. 여기에 사용할 수 있는 파라미터는 두 가지입니다.
scroll-behavior: smooth;
scroll-behavior: auto;
smooth가 부드럽게 스크롤되는 파라미터이며 auto는 기본값입니다. 즉 auto를 굳이 사용할 일은 없는 것입니다.
장점과 단점
제이쿼리 대비 코드가 매우 간단하다는 장점은 정말 환영받을 일입니다. 하지만 단점도 존재합니다. 제이쿼리를 사용하면 스크롤 속도를 제어할 수 있습니다만 애석하게도 CSS만으로 부드러운 애니메이션을 사용하는 경우에는 현재 CSS 버전에서는 변경이 불가합니다. 그냥 브라우저에서 기본 설정된 스크롤 속도를 사용해야만 합니다.
사용자를 위한 배려
스마트폰에서도 개발자 모드를 활성화하면 부드러운 스크롤이나 앱 화면 전환 등의 애니메이션을 끌 수 있습니다. 보통 이런 속도 옵션을 OFF하는 이유는 저사양 스마트폰에서 많이 사용하고 있습니다만 말그대로 사용자의 개성(?)에 따라서도 사용하지 않는 경우도 있습니다. 저는 부드러운 스크롤을 선호합니다만 다른 사람들 중에서는 그냥 휙! 휙! 하고 빨리 움직이는걸 좋아하는 분들도 계십니다. 그런 분들을 위한 추가 옵션이 이것입니다.
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}이 미디어쿼리를 사용하면 사용자가 별도로 설정한 브라우저의 옵션을 따릅니다. 지원 브라우저는 익스플로러 빼고 다 가능하므로 현존하는 대부분의 브라우저가 가능하다고 생각하시면 됩니다. 그러므로 prefers-reduced-motion: reduce 까지 같이 미디어쿼리로 사용해주면 사용자 모두를 만족시킬 수 있습니다. 본문의 내용은 앞으로 배포될 친효스킨 2.7 버전에 적용이 완료된 상태입니다. 끝.
