[ 자바스크립트(JavaScript) ] 부드럽게 scroll 하는 방법 알아보기

📍 부드럽게 scroll 하는 방법 알아보기

medium을 보다가 Div의 맨 아래로 scroll 하는 몇 가지 방법(scrollTop, clientHeight, scrollIntoView)을 작성한 글을 보던 중 scrollIntoView 메서드가 간편해 보여서 해당 메소드로 직접 기능을 직접 구현하면서 배운 점을 남긴다. scrollIntoView 메서드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤하는 메소드인데, caniuse 사이트에서 보면 거의 대부분의 브라우저에서 지원하므로 크로스 브라우징을 고려할 때 사용해도 괜찮은 메소드인것을 확인할 수 있다.

 

 

MDN을 참고하면 알 수 있지만 scrollIntoView 메서드의 인자는 총 2개를 받는데, alignToTop과 scrollIntoViewOptions가 되겠다. 첫번째 인자인 boolean형태의 alignToTop=true는 element 요소의 상단을 기준으로, alignToTop=false는 element 요소의 하단을 기준으로 스크롤을 설정한다.

 

728x90

 

두 번째 인자인 scrollIntoViewOptions는 최대 3개의 객체로 값을 넘겨받을 수 있는데, behavior(auto(default) || smooth), block(start(default) || center || end || nearest), inline(start(default) || center || end || nearest) 값을 넘겨받는다. alignToTop 생략하더라도 부드러운 움직임을 사용해야 하기 때문에 scrollIntoViewOptions에서 smooth를 포함했고, block의 상단 혹은 하단까지 내려가야하므로 block도 포함했다. 자세한 코드는 직접 작성한 copePen의 결과를 보면 된다.  살짝 이상한 점이 codepen browser에서 scroll하면 정상적으로 작동되는데 `embed` 한 결과에서 `scroll` 버튼을 누르면 현재 document.body까지 같이 scroll이 되는데 왜 이렇게 되는지 잘 모르겠다. 브라우저까지 움직이는 것이 불편하다면 우측 상단의 `edit on codepen` 글을 누르면 사이트에 들어가지는데 해당 사이트에서 보는것을 권장한다. 

 

See the Pen Untitled by an (@YWTechIT) on CodePen.

 

reference

1. medium
2. MDN