scroll-behavior 🌱

scroll-behavior: smooth

 

css 속성중에 scroll-behavior 속성이 있습니다.

위의 이미지는 scroll-behavior을 적용한것 

아래의 이미지는 적용하지 않은 것입니다.

 

scroll-behavior: auto;

 

scroll-behavior 속성을 적용하면 

navigation이나 cssom scroll API에 의해 scroll이 발생했을때의 동작을 정의할 수 있습니다.

아래와 같은 값들을 적용할 수 있습니다.

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: unset;

 

부드러운 동작을 선호하는 저로서는 사용할 일이 많을것 같습니다!

 

 

 

 

 

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

scroll-behavior - CSS: Cascading Style Sheets | MDN