[미션] React Plugin - Perfect Scrollbar

박경호·2022년 4월 21일
1

미션

목록 보기
1/2
post-thumbnail

미션

  • 리액트 (클래스형 컴포넌트)
  • 이미 적용된 스크롤바 디자인을 가져와 새로운 곳에 붙여야함

히스토리

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)을 적용했습니다.
profile
안녕하세요 나는 개발자 👨‍💻

0개의 댓글