스크롤바 이쁘게 스타일링하기

-webkit-scrollbar는 스크롤바 스타일링을 가능케 해준다.
이걸로 IE마냥 구시대적이고 꾸진 스크롤바 스타일을 모던하고 깔끔하게 만들 수 있다.
가령

globalStyle("::-webkit-scrollbar", {
  backgroundColor: "transparent",
});

스크롤바 배경을 투명하게 만들거나,

globalStyle("::-webkit-scrollbar-thumb", { 
  borderRadius: "99999px",
  backgroundColor: themeVars.color.gray[200],
});

스크롤바를 둥글게 만들고, 색깔을 바꿀 수도 있다.

아니면 여기서 더 나아가서 스크롤바를 화면 경계에서 약간 멀리 둘 수 있다.
이것은 약간의 기믹으로, background-clip를 padding-box로 만들어서 콘텐츠의 크기에서 외곽선을 잘려나게 하고, 외곽선 색을 투명색으로 정하면 마치 패딩이 생긴 것과 같은 효과가 생긴다.

그래서 외곽선을 투명색 외의 색상으로 정하면 아래와 같이 외곽선이 느려난다.

아래 코드는 이 기믹을 추상화한 것으로, 스크롤바의 간격과 폭을 정하면 세로 및 가로 스크롤에 적용된다.

const SCROLLBAR_WIDTH = "8px";
const SCROLLBAR_GAP = "16px";

globalStyle("::-webkit-scrollbar", {
  // 모종의 이유로, 이 선택자에 스타일링을 하지 않으면 스크롤바 스타일일이 무조건 기본 스타일이 됩니다.
  backgroundColor: "transparent",
});

globalStyle("::-webkit-scrollbar:vertical", {
  width: `calc(${SCROLLBAR_GAP} * 2 - ${SCROLLBAR_WIDTH})`,
});

globalStyle("::-webkit-scrollbar:horizontal", {
  height: `calc(${SCROLLBAR_GAP} * 2 - ${SCROLLBAR_WIDTH})`,
});

globalStyle("::-webkit-scrollbar-thumb", {
  border: `calc(${SCROLLBAR_GAP} - ${SCROLLBAR_WIDTH}) solid transparent`,
  backgroundClip: "padding-box",
  borderRadius: "99999px",
  backgroundColor: themeVars.color.gray[200],
});