CSS scroll-behavior 속성

정의와 사용법

scroll-behavior 속성은 사용자가 스크롤 가능 상자 내의 링크를 클릭할 때, 직선 점프 대신 애니메이션 효과와 함께 원활하게 스크롤 위치를 설정하는지 여부를 정의합니다.

문서에 원활한 스크롤 효과를 추가합니다:

html {
  scroll-behavior: smooth;
}

scroll-behavior: auto|smooth|initial|thừa kế;

값	설명
자동	기본 값. 스크롤 상자 내 요소 간에 직접 점프하는 '스크롤 효과'를 허용합니다.
원활	스크롤 상자 내 요소 간에 원활한 '스크롤 효과'를 허용합니다.
기본값	이 속성을 기본 값으로 설정합니다. 참고: 기본값.
thừa kế	부모 요소에서 이 속성을 thừa kế합니다. 참고: thừa kế.

기본 값:	자동
thừa kế:	아니요
애니메이션 제작:	지원하지 않습니다. 참고:애니메이션 관련 속성.
버전:	CSSOM View Module（작업 초안）
JavaScript 문법:	object.style.scrollBehavior="smooth"

표에 기재된 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬	IE / 엣지	파이어폭스	사파리	오페라
61.0	79.0	36.0	14.0	48.0