scroll snap + scrollIntoView() 스크롤 하단으로 이동하는 현상 해결안

Darcy Daeseok YU ·2022년 2월 10일
0

scroll snap 을 이용해서 슬라이더를 그려보았다.
스크롤 할때마다 페이지 최하단으로 이동하는 문제가 나왓다.
결론 :

.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start",
});

옵션을 추가해주면 문제가 해결된다.

아래는 풀이
scrollIntoViewOptions Optional
다음의 프로퍼티를 가지는 객체
behavior Optional
전환에니메이션을 정의.
"auto", "smooth"중 하나 선택. 기본값은 "auto".
block Optional
수직 정렬을 정의
"start", "center", "end", "nearest"중 하나 선택. 기본값은 "start".
inline Optional
수평 정렬을 정함
One of "start", "center", "end", "nearest"중 하나 선택. 기본값은 "nearest".

scrollIntoView() 메소드 사용 전
css 설정

.parent {
  scroll-snap-type: inline(x or y)  mandatory; 
  scroll-behavior : smooth;
}
.child{
  scroll-snap-align: start;
}
profile
React, React-Native https://darcyu83.netlify.app/

0개의 댓글