React 스크롤 커스텀하기 , 스크롤 색 바꾸기

음 예전에는 scroll custom 을 라이브러리를 사용해서 해봤었는데, 이번에는 그냥 라이브러리 없이 css 만으로 구현해보기로 했다.

 

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

스크롤바 다시 커스텀..

 

그런데 구글링을 하고 계속 시도해보는데 왜 때문인지 바뀌지가 않았다.

결국 문제는 해결할 수 있었지만 커스텀을 위해 꼭 필요한 부분을 강조한다.

 

overflow : scroll

overflow: scroll 속성이 필히 부여되어있어야한다.

 

::-webkit-scrollbar

스크롤바를 커스텀 하기위해서 ::-webkit-scrollbar 라는 프로퍼티를 건드리게 되는데

이때 중요한 점은 ::-webkit-scrollbar ::-webkit-scrollbar-thumb  이 두가지 프로퍼티가 세트로 같이 들어가야 커스텀이 된다는 것이다. 이것때문에 1시간 정도 날려먹었다. 

 

css import 로 커스텀 

https://codesandbox.io/s/affectionate-cerf-zqlsy9?file=/src/App.js 

affectionate-cerf-zqlsy9 - CodeSandbox

 

추가적으로..

useEffect 를 사용해서 어떠한 컴포넌트를 사용할때는 커스텀 스크롤바를 사용하게 끔 하고 싶었지만, 한번 webkit-scrollbar 로 css 가 지정되어버리면 원래대로 되돌릴 수 가없었다. (방법이 있겠지만 찾지못했다.)

unset 과 initial 속성으로 초깃값으로 돌려보려고 했지만 실패했다.

useEffect(() => {
    var s = document.createElement("style");
    s.innerHTML =
      "::-webkit-scrollbar{ width: 10px; margin-right:2px; } ::-webkit-scroll-track{background-color: white; width:10px;} ::-webkit-scrollbar-thumb {height: 30%; background: #217af4;}";
    document.body.appendChild(s);

    return () => {
      console.log("sibal");
      var s = document.createElement("style");
      s.innerHTML =
        "::-webkit-scrollbar{ width: unset; } ::-webkit-scroll-track{background-color:unset;} ::-webkit-scrollbar-thumb { height:unset; background: unset; }";
      document.body.appendChild(s);
    };
  }, []);