❏ css - 마우스 스크롤 효과 적용하기( scroll-behavior )

 

안녕하세요!

 css하나로 부드러운 스크롤링을 하는 속성을 가지고 왔습니다.

 

바로scroll-behavior라는 속성입니다.

 

 scroll-behavior 속성은 보통 auto라는 기본 값을 가지고 있습니다.

 

오늘은 부드럽게 움직이는 화면 스크롤을 구현하기 위해서 smooth라는 속성값을 주도록 하겠습니다.

scroll-behavior의 속성값들

 

 

속성을 적용했을 때와 아닐 때의 차이에 대해서 알아볼까요??

 

---

1. scroll-behavior : auto;

 

그전에 사용했던 코드를 그대로 사용하겠습니다.

 

먼저 우선으로 기본적인 속성값을 적용한 화면을 알아볼까요?

<section>
    <div id="container1">1</div>
    <div id="container2">2</div>
    <div id="container3">3</div>
    <div id="container4">4</div>
    <div id="container5">5</div>
</section>

html{
    scroll-behavior: auto;
}

지금은 스크롤 속성없이 일반적인 모습으로 올라갑니다.

---

2. scroll-behavior : smooth;

 

이번에는 기본값이 아닌 smooth 입니다.

<section>
    <div id="container1">1</div>
    <div id="container2">2</div>
    <div id="container3">3</div>
    <div id="container4">4</div>
    <div id="container5">5</div>
</section>

html{
    scroll-behavior: smooth;
}

적용된 모습은 아래와 같습니다.

 

 

---

한번 둘을 같이 두고서 볼까요??

좌 auto / 우 smooth

 

 

 

페이지를 스크롤 시 

약간의 스크롤하는 속도가 조절이 된 것 같습니다.

(;＾◇＾;) ゝ

 

더 많은 설명은 공식문서를 참고해 보세요!

scroll-behavior - CSS: Cascading Style Sheets | MDN