딱붙! 착붙! Scroll Snap_CSS

🙋🏻‍♂️ Scroll Snap

웹페이지를 보면 원페이지로 이루어진 페이지들도 많이 있습니다.
이런 페이지들을 보면 스크롤에 따라서 페이지가 변경 되는데,
각 섹션이 화면 상단에 착! 하고 붙는 모습들을 볼수가 있습니다.

JS에서 스크롤 이벤트를 통해 구현할 수 있지만,
CSS를 통해 구현해 낼 수 있는 방법이 있습니다.!

예시 페이지 : 벤크 코리아

백번 말해 봤자 어떤걸 하려고 하는지 직접 눈으로 보는게 좋을 것 같아
예시로 실제 적용된 웹사이트를 가져와봤습니다.

요 기능을 CSS의 Scroll Snap을 이용해서 구현해 낼 수 있습니다!

📜 Scroll Snap 공식문서

Scroll Snap 공식문서

무슨 기능을 배우기 전에 공식문서를 보는 습관을 조금씩 들이고 있습니다.
그래서 이번에도 한번 확인해 보고자 합니다 ㅎㅎ

공식문서를 보면 scroll-snap-type과 scroll-snap-align의 코드를 활용해
이런 이벤트를 구현해 낼 수 있겠습니다.

scroll-snap-type을 섹션들을 감싸고 있는 부분에 적용하고
scroll-snap-align은 각 섹션에 각각 적용해 주면 됩니다.

🖥 적용 코드 확인

• 적용한 기술은 react (함수형) / styeld-component 를 적용하였습니다.

const ScrollSnapWrap = styled.div`
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
`;

const SnapDiv = styled.div`
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  border: 5px solid red;
  text-align: center;
  font-size: 100px;
`;

export const TestMs = () => {
  return (
    <>
      <ScrollSnapWrap>
        <SnapDiv>1</SnapDiv>
        <SnapDiv>2</SnapDiv>
        <SnapDiv>3</SnapDiv>
        <SnapDiv>4</SnapDiv>
        <SnapDiv>5</SnapDiv>
      </ScrollSnapWrap>
    </>
  );
};

scroll-snap-type은 어떤 방향으로 스크롤을 할 것이고,
효과 적용에 대한 엄격도를 정할 수 있습니다.
엄격도를 정하는 종류는 mandatory proximity가 있습니다.

scroll-snap-align은 스크롤을 움직였을 시 어떤 부분에 달라붙게 할지를 정합니다.
start center end 의 종류가 있는데,
기준을 상단으로 줄지 가운데로 줄지 바닥으로 줄지 결정해 줍니다.

👉 구동 화면

해당 화면은 mandatory로 적용해 봤는데,
mandatory가 proximity 보다 더 엄격하게 적용이 되는 것 같습니다!

해당 기능을 활용하면 간단하게 멋진 화면을 구현할 수 있겠습니다!

개인적인 학습을 통해 나만의 개발 공략집을 만드는 과정입니다.
혹 상기 내용에 대해 수정해야할 부분이나 더 공부했으면 하는 부분이 있다면
언제든 댓글로 알려주세요!

친절에 기반한 피드백은 언제나 감사합니다.

참고 자료
Scroll Snap 공식문서