CSS 스크롤 동작 속성
예시
문서에 부드러운 스크롤 효과 추가:
html {
scroll-behavior: smooth;
}
정의 및 사용
이 scroll-behavior
속성은 사용자가 스크롤 가능한 상자 내의 링크를 클릭할 때 직선 점프 대신 스크롤 위치를 부드럽게 움직일지 여부를 지정합니다.
기본값: | 자동 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSSOM 보기 모듈(작업 초안) |
자바스크립트 구문: | 개체 .style.scrollBehavior="부드러움" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
scroll-behavior | 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
CSS 구문
scroll-behavior: auto|smooth|initial|inherit;
속성 값
Value | Description |
---|---|
auto | Allows a straight jump "scroll effect" between elements within the scrolling box. This is default |
smooth | Allows a smooth animated "scroll effect" between elements within the scrolling box. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |