반응형
몇년전에 프로젝트에서 사용할 용으로 만들어뒀다. 당연히 pc에선 필요없을거고, 모바일용으로 접근성 테스트 까지 끝냈으니 비슷한류에 컴포넌트에 적용할수 있을듯. css: snap-scroll을 사용해도 되는 환경이라, 적용해보면서 IntersectionObserver로 영역잡아서 만들어놨다. 예전거라 다시 소스를 손볼일은 없지만. 가져다가 더 좋게 활용하시면 될듯하다.
css:snap-scroll로 snap 적용, IntersectionObserver로 화면 노출영역 잡아서 클래스 제어
접근성 적용(터치영역 radio로 변경, aria-labelledby 속성 추가)
data-init 속성으로 초기값 설정
See the Pen rolling date/year by banisle (@banisle) on CodePen.
반응형