[CSS] scroll-behavior:smooth 속성이 제대로 동작하지 않을 때 해결 방법

1. scroll-behavior:smooth 속성이 제대로 동작하지 않을 때 해결 방법

이번 포스트에서는 웹 개발 시 가끔씩 마주치는 scroll-behavior:smooth 속성이 제대로 동작하지 않을 때 어떻게 해결할 수 있는지에 대해 알아보겠습니다.

scroll-behavior:smooth란?

scroll-behavior:smooth는 CSS 속성으로, 페이지 내에서 링크를 클릭하거나 특정 요소를 참조했을 때 스크롤이 부드럽게 이동하도록 하는 기능입니다. 일반적으로 사용자에게 편안한 경험을 제공하며, 특히 콘텐츠가 많은 웹사이트에서 유용하게 사용됩니다.

예시

html {scroll-behavior:smooth;}

2. 문제가 발생하는 이유

• ‘애니메이션 효과’ 설정 여부 : Windows 운영체제를 사용하는 경우, 애니메이션 효과가 꺼져 있으면 이 기능이 비활성화될 수 있습니다.

• ‘애니메이션 효과’ 설정 확인하기
  부드러운 스크롤링이 되지 않는 경우, 먼저 시스템의 ‘애니메이션 효과’ 설정을 확인해야 합니다. 아래의 단계로 진행해 보시기 바랍니다:

1. Windows 키 + I 키를 눌러 ‘설정’ 메뉴로 이동합니다.

2. 접근성 옵션 확인 : 접근성 - 시각효과 - 애니메이션 효과 키기

p.s 애니메이션 효과를 켜도 scroll-behavior:smooth가 작동하지 않는다면 !important를 이용해 한 번 강제로 실행하면 그 이후에는 !important 없이도 잘 작동한다.

html {scroll-behavior:smooth !important;}