profile
https://www.rarebeef.co.kr/
태그 목록
전체보기 (196)TIL(85)project(71)sql(47)datacamp(33)python(29)dashboard(18)Data Analyst(16)코드스테이츠(12)React(12)블로그(10)Datastudio(9)js(8)data(7)front end(7)query(7)JavaScript(7)CSS(6)nextjs(5)html(5)programmers(5)Cheat Sheet(5)tableau(4)첫 프로젝트(4)office hour(4)유어클래스(3)데이터 분석가(3)analysis(3)redux(3)game(3)JOIN(3)scss(3)typescript(3)league of legends(2)Firebase(2)Visualize(2)steam(2)3D(2)logo(2)블로깅(2)관계형 데이터베이스(2)slide(2)인사이트(2)오피스아워(2)BigQuery(2)pwa(2)ESLint(2)frontend(2)error(2)KPI(2)데이터(2)OfficeHour(2)da(1)타입스크립트(1)next-pwa(1)google sheet(1)webpack(1)벨로그(1)시퀄(1)next(1)baekjoon(1)application(1)Rainbow Six Siege(1)sns(1)react-query(1)데이터베이스(1)State(1)The rare beef(1)예외처리(1)Sass(1)정육면체(1)tailwindCSS(1)게임 배급사(1)RAREBEEF(1)Data Table(1)JS 시계(1)구글docs(1)ngrok(1)시계(1)insight(1)proptypes(1)react native(1)crawl(1)ds(1)Illustrator(1)Crawling(1)Feedback(1)icon(1)next.js(1)next js(1)Database(1)regexp(1)Map(1)columns(1)Data Literacy(1)scrollTo(1)CUBE(1)데이터 분석(1)시간(1)Date(1)OT(1)상태관리(1)Big query(1)kakao(1)vscode(1)netlify(1)self join(1)Data studio(1)date 객체(1)canvas(1)Auth(1)DE(1)scroll-snap(1)JS 시간(1)Relational Database(1)Data scientist(1)web(1)package(1)interactive(1)API(1)npm(1)라이브러리(1)데이터 사이언티스트(1)jupyter notebook(1)settings sync(1)리액트(1)쿼리(1)responsive(1)게임 제작사(1)next/babel(1)nodejs(1)slider(1)데이터 문해력(1)blender(1)데이터 엔지니어(1)리덕스(1)지표(1)FCM(1)데이터 테이블(1)Data Engineer(1)Rainbow Six(1)node.js(1)과제(1)

scroll-snap에서 scrollTo 사용하기

scroll-snap을 적용한 페이지를 제작 중이었다. scroll-snap을 적용하기 위해서는 컨테이너 하나와 그 컨테이너 내부에 스크롤할 요소들이 들어가 있어야 한다. 또한 컨테이너는 overflow 속성이 스크롤 가능하도록 되어있어야 한다. scroll-snap의 적용은 크게 어려울 것이 없어서 수월하게 진행되었다. 다만 문제는 scrollTo를 이용한 스크롤의 제어가 작동하지 않는 것이었다. scrollTo를 이용해 다음 아이템으로 스냅하고 싶었는데 스크롤은 미동도 없었다. scroll-snap을 비활성화하면 scrollTo가 정상적으로 작동하는데 scroll-snap만 켜지면 작동하지 않았다. 원인은 스크롤의 대상이었다. 지금껏 window.scrollTo 로 브라우저 창의 스크롤을 열심히 제어하려고 시도했는데 생각해보면 브라우저의 높이는 100vh로 맞춘 상태여서 스크롤이 될리가 없었다. snap 컨테이너가 overflow 되며 생긴 스크롤을 브라우저의 스크롤로 착

2021년 12월 16일
·
0개의 댓글
·