미션
- 리액트 (클래스형 컴포넌트)
- 이미 적용된 스크롤바 디자인을 가져와 새로운 곳에 붙여야함
히스토리
1. 사용된 플러그인 인지
- 복제 대상 엘리먼트를 Chrome DevTools로 조사해 보았더니
아래와 같은 코드를 발견할 수 있었습니다.
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 120px;"></div>
- 구글에
ps__thumb-y
를 검색하였고 해당 플러그인은 Perfect Scrollbar(이하 ps)라는 것을 알게 되었습니다.
2. 문서 확인
- 모든 모듈(혹은 플러그인)은 대부분 문서가 존재합니다
- 공식홈페이지의 문서에서 예상 원인을 찾을 수 있었습니다..
예상 원인
- 컨테이너가 position 스타일이어야 한다.
- X축 스크롤바는 bottom 혹은 top 값을 가지고 있어야한다.
- Y축 스크롤바는 right 혹은 left 값을 가지고 있어야한다.
결과
- 실패 : 많은 시간을 들였지만 더이상 메달리는것은 안되겠다고 생각했었습니다. 이것저것 시도하다가 결국은 되었는데 원인을 몰랐기 때문에 실패라고 적었습니다.
- 그 이후 디자인을 봤는데 전혀 어울리지 않아서 다른 플러그인(Swiper)을 적용했습니다.