특정 스크롤 위치에 부드럽게 애니메이션 적용 scroll-behavior: smooth;

mousewheel 이벤트를 통해 페이지 스크롤 시에 스무스하게 스크롤링 되는 것을 표현하고자 했다.

TweenMax와 ScrollTopPlugin으로 y 값을 조정하는 것이었는데 이 코드가 계속 실행이 안되는 것이었다.

알고보니 css 속성 중에 html {scroll-behavior: smooth;} 를 넣은 것 때문에 자바스크립트가 제대로 동작하지 않았던 것이었다.

 

---

scroll-behavior: smooth;

scroll-behavior 속성은 사용자가 스크롤 가능한 상자 내의 링크를 클릭할 때(Ex. 상단으로 가기 버튼 등)

직선 점프 대신 스크롤 위치에 부드럽게 애니메이션을 적용할 지 여부를 지정하는 속성이다.

 

기본 값은 auto;

---

 

아마도 window.scrollTop을 사용하면서 내부에 있는 scroll-behavior와 CSS 속성이 충돌한 듯.

 

 

+

 

특정 위치로 가는 코드를 작성할 때 option 들을 입력할 수 있다.

top 은 세로, left 는 가로, scroll-behavior 는 스크롤 효과를 지정하는 속성이다.

1. window.scrollTo(x, y)

2. window.scrollTo({top: 0, left:0, behavior:'auto'})

 

 

 

https://caniuse.com/?search=scroll-behavior 

"scroll-behavior" | Can I use... Support tables for HTML5, CSS3, etc

https://enai.tistory.com/33

window.scrollTo를 이용하여 특정 위치로 이동시키기