프론트 개발 블로그

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

CSS

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

maybe.b50 2021. 11. 15. 23:18

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

Scroll methods on elements (scroll, scrollTo, scrollBy) Methods to change the scroll position of an element. Similar to setting `scrollTop` & `scrollLeft` properties, but also allows options to be passed to define the scroll behavior.

caniuse.com

https://enai.tistory.com/33

 

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

홈페이지 중에 탭 메뉴를 클릭하면, 특정 위치로 스크롤바가 이동되면서 화면에 보여지는 것을 본 적 있을 것이다. scrollTo() 메서드로 이를 구현할 수 있다. window 객체의 scrollTo 메서드는 문서를

enai.tistory.com

 

반응형

'CSS' 카테고리의 다른 글

화면너비 폰트 사이즈 vw 구하기  (0) 2022.03.25
input 자동완성 배경색 변경하기  (0) 2021.10.28
word-wrap 대신 overflow-wrap  (0) 2021.06.30
[가상 클래스] not:() 을 사용해보자  (0) 2021.01.08
vw calculator  (0) 2020.12.28
'CSS' Related Articles more