부트스트랩 페이지 내 이동 부드럽게 기능 끄기

부트스트랩에서 페이지 내 이동 시 부드러운 스크롤 기능을 끄는 방법을 찾아봤다. 부트스트랩을 사용하다 보면 페이지 내 앵커 링크나 버튼을 클릭했을 때, 브라우저가 부드럽게 스크롤되면서 해당 위치로 이동하는 걸 자주 보게 된다. 사실 이 부드러운 스크롤 효과는 보기엔 멋질 수 있지만, 경우에 따라서는 UX나 페이지 성능에 문제가 될 수도 있다. 특히 빠른 반응이 필요한 웹사이트나 특정 상황에서는 이 기능을 끄고 싶을 때가 많다.

그래서 찾아본 방법이 바로 CSS에서 scroll-behavior 속성을 조정하는 것이다. 다행히도 부트스트랩에서는 아주 간단하게 이 기능을 비활성화할 수 있었다.

다음과 같이 CSS에 scroll-behavior: initial;만 추가하면 된다.

:root {
    scroll-behavior: initial;
}

이렇게 설정하면, 페이지 내의 모든 링크가 기본적인 스크롤 동작으로 돌아가면서 부드러운 스크롤 효과 없이 바로 이동하게 된다. 한마디로 스크롤이 더 즉각적으로 반응하게 되는 거지.

이 기능을 비활성화하니 페이지가 조금 더 빠릿빠릿하게 반응하는 느낌이다. 앞으로 이 방법을 자주 써야겠다고 생각했다. 역시, 코딩은 작은 설정 하나가 UX를 크게 바꿀 수 있다는 점이 흥미롭다.

다음엔 또 다른 유용한 팁을 찾아봐야지!