아래의 내용은 예전 기록입니다.
최근 글을 참고해주세요.
2022.05.08 - [공부기록/커뮤니티 프로젝트] - 스크롤바 다시 커스텀..
스크롤바 다시 커스텀..
아.. 이 무슨 .. 기존에 사용하던 스크롤바 라이브러리이다. 윈도우에서는 내 입맛에 맛게 커스텀 되었지만, 최근에 맥북으로 바꾸게 된 프로젝트 환경에서는 그렇지 않았다. 즉, 내가 원하는 모
ehddud100677.tistory.com
왜 당신은 스크롤바 커스터마이징을 하고 있나?
최근 진행하고 있는 프로젝트에서 스크롤 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
React scrollbars component. Contribute to malte-wessel/react-custom-scrollbars development by creating an account on GitHub.
github.com
stackoverflow
How to change cursor style for react-custom-scrollbars?
The default cursor for react-custom-scrollbars is pointer when you move your mouse on the scroll bar. Is there a way to change cursor style? Right now neither of these works. <Scrollbars styl...
stackoverflow.com
'공부기록 > 커뮤니티 프로젝트' 카테고리의 다른 글
| 띄어쓰기가 포함된 폴더 이동 (0) | 2022.04.14 |
|---|---|
| [오류] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string. (0) | 2022.04.09 |
| 실시간 챗 프로젝트 코드 분석 (0) | 2022.04.09 |
| 인텔리제이 안켜지는 상황 / 무한 스플래쉬화면 (0) | 2022.04.08 |
| 업무 일지 (0) | 2022.04.02 |