Scroll-Snap ? 해볼게요.

 

조사

일단 이런 스크롤스냅이 가능한 쥬뗌 치킨 웹사이트를 만들고 싶었습니다. 막 뭔가 엄청난 에니메이션이 필요할 줄 알았는데, 방법은 여러가지가 있지만 제일 간단해 보이는 방법으로 일단 적용해봤습니다. 

 

https://ditisbobo.nl/

Dit is BoBo

 

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

scroll-snap-type - CSS: Cascading Style Sheets | MDN

 

 

적용 

global.css에 scroll-snap-type 추가

scroll-snap-type: y mendatory // y축으로 무조건 스크룰을 강제하게끔 하는 속성입니다. 

 

보여줄 컴포넌트에서 scroll-center랑 snap-always

snap-center  // 스크롤을 하고 났을때 보여주는 컴포넌트 뷰 측면에서 정렬
snap-always  // 애초에 부모 컨테이너 쪽에서 mandatory가 켜져있어야하는데 또한 무조건 스냅을 해야한다는 것

 

 

 

결과