목록휠이벤트 (1)

프론트 개발 블로그

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

mousewheel 이벤트를 통해 페이지 스크롤 시에 스무스하게 스크롤링 되는 것을 표현하고자 했다. TweenMax와 ScrollTopPlugin으로 y 값을 조정하는 것이었는데 이 코드가 계속 실행이 안되는 것이었다. 알고보니 css 속성 중에 html {scroll-behavior: smooth;} 를 넣은 것 때문에 자바스크립트가 제대로 동작하지 않았던 것이었다. scroll-behavior: smooth; scroll-behavior 속성은 사용자가 스크롤 가능한 상자 내의 링크를 클릭할 때(Ex. 상단으로 가기 버튼 등) 직선 점프 대신 스크롤 위치에 부드럽게 애니메이션을 적용할 지 여부를 지정하는 속성이다. 기본 값은 auto; 아마도 window.scrollTop을 사용하면서 내부에 있는 ..
CSS 2021. 11. 15. 23:18
이전 Prev 1 Next 다음