스크롤할때 스냅처리하기 예제 scroll-snap-type > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

css | 스크롤할때 스냅처리하기 예제 scroll-snap-type

본문

스크롤할때 해당 영역에 딱 붙어부리는 효과를 css로만 구현이 가능하다.

부모영역에 scroll-snap-type 속성을, 자식영역에 scroll-snap-align, scroll-snap-stop 속성을 부여하면 된다.


scroll-snap-stype: [ mandatory | proximity ] 

- proximity : 설정에 맞춰 스냅, 미지정이라면 브라우가 알아서 함

- mandatory : 항상 스냅

 

scroll-snap-align: [ none | start | end | center ]

- none: 스냅 기준점을 지정하지 않음

- start: 시작 부분에 맞춰 정렬

- end: 끝 부분에 맞춰 정렬

- center: 가운데에 맞춰 정렬

 

기타 scroll-padding, scroll-margin 이 있다.

 

[code]

 

 

 

<!doctype html>

 

<html>

<head>

<style type="text/css">

html {

  height: 100%;

  overflow: hidden;

  margin: 0;

  padding: 0;

}


body {

  overflow: auto;

  scroll-snap-type: y mandatory;

  height: 100vh;

  margin: 0;

  padding: 0;

}


.element {

  scroll-snap-align: start;

  scroll-snap-stop: normal;

  

  width: 100vw;

  height: 100vh;

  

  color: white;

  font-size: 50px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.element:nth-child(1) {

  background: #1d1e21;

}

.element:nth-child(2) {

  background: #ee6620;

}

.element:nth-child(3) {

  background: #777ba0;

}

.element:nth-child(4) {

  background: #da1e62;

}


</style>

</head>

<body class="scroll-snap">

    <div class="wrapper">

      <div class="element">1</div>

      <div class="element">2</div>

      <div class="element">3</div>

      <div class="element">4</div>

    </div>

</body>

 

</html>[/code]

 


 

댓글 0개

등록된 댓글이 없습니다.

Menu