리액트 스크롤바 커스터마이징

아래의 내용은 예전 기록입니다.

최근 글을 참고해주세요.

2022.05.08 - [공부기록/커뮤니티 프로젝트] - 스크롤바 다시 커스텀..

스크롤바 다시 커스텀..

 

왜 당신은 스크롤바 커스터마이징을 하고 있나?

최근 진행하고 있는 프로젝트에서 스크롤 ui 부분이 우리가 만들어나가고 싶은 감성과 맞지 않아서 커스터마이징을 해야하는 상황이였다.

 

그래서 어떻게 해결했나?

우선 npm 에서 킹갓 분들이 이미 만들어두신 react-custom-scrollbars를 사용하기로 하였다. 실무적인 부분에서 내가 만드는 것은 그것으로 의미가 있지만, 예상치 못한 버그때문에 라이브러리를 선호한다.

 

처음에는 thumbSize를 사용해서 세로길이와 모양새는 커스터마이징을 했는데 이 스크롤바의 가로길이는 조정하지 못했다.

 react-custom-scrollbars 공식문서와 stackoverflow를 뒤적거린 결과 결국 해결했다.

 

위와 같은식으로 스크롤바의 div의 css를 모두 작성하였다.

그리고 문제가 되는 class인 track-vertical 부분만 style 까지 props 해주면 해결할 수 있다!

 

 

혹시 저와 같이 가로 길이를 커스터마이징 하시는 분들을 위해 도움을 받았던 자료의 링크를 남깁니다.

 

공식문서

https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/v2-documentation.md

GitHub - malte-wessel/react-custom-scrollbars: React scrollbars component

stackoverflow

https://stackoverflow.com/questions/47066477/how-to-change-cursor-style-for-react-custom-scrollbars/54973078#54973078

How to change cursor style for react-custom-scrollbars?