⭐ 0
🔍
텍스트 이미지 PDF 및 문서 오디오 음악 전자 회로 시간 유틸리티 검증인 신비주의 게임

CSS 스크롤바 생성기

스크롤바의 너비, 트랙, 썸, 호버 색상을 설정하고, 실제 WebKit 결과와 실제 Firefox 결과를 나란히 확인하세요. 두 브라우저의 진짜 엔진 차이를 있는 그대로 보여줍니다.

🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.

10px
8px

::-webkit-scrollbar 의사 요소로 스타일링되었습니다. Chrome, Safari, Edge라면 이 상자는 각 브라우저의 실제 엔진을 통해 렌더링됩니다.

Firefox의 scrollbar-width 및 scrollbar-color 속성으로 스타일링했습니다. 다른 브라우저에서는 이 속성을 무시하고 자체 기본 스크롤 막대를 표시하므로, 실제 결과를 보려면 Firefox에서 이 페이지를 여세요.

Firefox에는 별도의 호버 색상, 썸의 둥근 모서리 반경, 독립적인 트랙 스타일이 없으며, 선택한 두께에서 실제 키워드로 매핑된 scrollbar-width만 제공됩니다: thin

처리 중... 0%

결과

Chrome, Safari, Edge는 ::-webkit-scrollbar 가상 요소 계열로 스크롤바를 꾸밉니다. 트랙, 썸, 썸의 호버 상태를 위한 별도 규칙과 픽셀 단위의 정확한 너비, 썸의 border-radius가 포함됩니다. Firefox는 이 모든 것을 완전히 무시하고, 대신 나중에 CSS Scrollbars 명세에 포함된 두 개의 표준 속성인 scrollbar-width와 scrollbar-color만 읽습니다. 이 둘은 같은 기능의 다른 방언이 아니라, 상한선이 다른 별개의 기능 세트입니다. 대부분의 스크롤바 생성기는 WebKit 결과만 보여주며 그 차이를 슬쩍 덮지만, 이 도구는 그렇지 않습니다.

너비, 트랙 색상, 썸 색상, 호버 색상, 썸 모서리 반경을 한 번 설정하면, 도구가 동일한 입력값으로 두 개의 규칙 세트를 만듭니다. WebKit 블록은 ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb과 그 :hover 상태를 왼쪽 데모 박스에 적용하므로, Chrome, Safari, Edge에서 렌더링되는 그대로의 모습을 보게 되며, 시뮬레이션된 오버레이가 아닙니다. Firefox 블록은 오른쪽 데모 박스에 scrollbar-width와 scrollbar-color를 설정하여, 이 페이지가 실제 Firefox에서 열렸을 때만 그 브라우저 엔진을 통해 다르게 보입니다. WebKit 브라우저에서는 거기에 자체 기본 스크롤바가 보이며, 도구는 빌려온 픽셀로 Firefox 모습을 흉내 내지 않고 그 사실을 알려줍니다.

너비 매핑은 그 차이를 보여주는 가장 분명한 예입니다. Firefox의 scrollbar-width는 auto, thin, none 키워드만 허용하며, 절대 정확한 픽셀 값을 받지 않습니다. 이 생성기는 선택한 너비를 솔직하게 매핑하여(8px 이하는 thin, 그보다 넓으면 auto) 그 결과 키워드를 입력값 옆에 표시하며, 존재하지도 않는 픽셀 단위의 완벽한 Firefox 결과를 만들어내지 않습니다. 또한 Firefox에는 별도의 호버 색상, 독립적인 썸 border-radius, 또는 scrollbar-color의 두 번째 값 이상을 제공하지 못하는 트랙 색상을 설정할 방법이 없습니다. 이는 플랫폼의 영구적이고 실제적인 한계이지, 이 도구의 누락이 아닙니다.

결합된 CSS 블록을 복사하면 두 규칙 세트가 각각의 주석 아래 함께 이동하므로, 스타일시트에 그대로 붙여 넣을 수 있습니다. 컨트롤을 조작하는 대로 모든 것이 여러분의 브라우저 안에서 렌더링되고 업데이트됩니다. 업로드도, 계정도, 서버 왕복도 필요 없으며, 페이지가 한 번 로드된 후에는 오프라인에서도 계속 작동합니다.

이 도구가 마음에 드시나요? 유용하다고 생각하시나요? 잠재력을 보시고 지원하고 싶으신가요?

🛡️
브라우저에서 실행

파일과 입력값은 이 기기를 절대 떠나지 않습니다. 모든 처리가 완전히 오프라인에서 이뤄집니다. 100% 안전합니다.

허용 형식 & 규칙

  • 공유된 컨트롤 — 너비, 트랙 색상, 썸 색상, 호버 색상, 썸 모서리 반경 — 이 동일한 입력값으로 두 엔진을 모두 구동합니다.
  • 솔직한 scrollbar-width 매핑: Firefox는 thin, auto, none만 지원하므로, 선택한 정확한 픽셀 값이 가장 가까운 실제 키워드로 매핑되어 입력값 옆에 표시됩니다.
  • WebKit 가상 요소 규칙과 Firefox 표준 속성을 함께 담아 명확하게 주석 처리한, 결합된 복사 가능 CSS 결과물입니다.

주요 장점

✓ 두 개의 실시간 데모 박스가 각 엔진의 실제 스크롤바를 렌더링합니다. WebKit 박스는 Chrome, Safari, Edge에서 보이는 모습 그대로를 보여주며, 가짜 렌더링이 아닙니다.
✓ Firefox의 기능 공백이 숨겨지지 않고 드러납니다. 호버 색상, 썸 모서리 반경, 독립적인 트랙 스타일링은 Firefox에서 존재하지 않으며, 도구는 그 사실을 숨기지 않고 명확하게 알려줍니다.
✓ 복사 가능한 하나의 CSS 블록이 폴백 주석과 함께 두 규칙 세트를 모두 포함해 전달되므로, 붙여 넣기만 하면 됩니다.

사용 사례

  • • 대시보드 사이드바의 스크롤바를 브랜드 팔레트에 맞춰 스타일링하고, 배포 전에 파이어폭스에서 해당 스타일이 어디까지 적용되는지 직접 확인하세요.
  • • 선택한 두께에 대해 thin과 auto 중 어느 키워드가 더 근접한지 추측할 필요 없이, 정확한 파이어폭스의 scrollbar-width 키워드를 얻으세요.
  • • 주석이 각각 명확하게 달린 WebKit 가상 요소 규칙과 Firefox 표준 속성을 하나의 CSS 블록으로 복사하여 스타일시트에 바로 붙여넣으세요.