[scroll] CSS - scroll-behavior 속성 ★ - 스크롤박스 내 동일 페이지 링크 이동 시 부드럽게 이동할지 여부 지정 (= scroll-behavior속성 = 스크롤비헤이비어속성/스크롤비해이비어속성) ※ 스크롤 동작방식 지정

1. scroll-behavior 예제 - 스크롤 박스 내 링크 이동 방식 지정
2. scroll-behavior 정의
3. scroll-behavior 구문

scroll-behavior 예제 - 스크롤 박스 내 링크 이동 방식 지정

 

<style>

html {

  scroll-behavior: smooth;

}

#section1 {

  height: 600px;

  background-color: pink;

}

#section2 {

  height: 600px;

  background-color: lightblue;

}

</style>

<div id="section1">

  <h2>섹션1</h2>

  <a href="#section2">섹션2로 이동</a>

</div>

<div id="section2">

  <h2>섹션2</h2>

  <a href="#section1">섹션1으로 이동</a>

</div>

 

결과보기

scroll-behavior 정의

 

사용자가 스크롤 가능한 박스 내 링크 클릭 시, 바로 이동할지 부드럽게 부드럽게 애니메이션화할지 여부 지정.

 

---

 

1.

• 출발지 <a> 태그의 href 속성값에 동일페이지 내 특정 (#id/#name) 속성 지정 시 해당 지점으로 이동함. (예) href="#hz"
• 목적지 요소의 (id/name) 속성값 앞엔 #(샾) 기호 안 붙임. (예) id="hz" / name="hz"

 

2.

• 기본값: auto
• 상속여부: X
• 애니가능: X
• CSS버전: CSSOM View Module (Working Draft)
• JS구문: object.style.scrollBehavior="smooth";

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN scroll-behavior 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

 

scroll-behavior 구문

 

selector {scroll-behavior: auto|smooth|initial|inherit;}

 

---

[속성값]

 

• auto - 바로 이동 (기본값)
• smooth - 부드럽게 이동.
• initial - 이 속성의 기본값 사용.
• inherit - 부모요소의 속성값 상속.