CSS 스크롤바 생성기

::-webkit-scrollbar 의사 요소 제품군이 있는 Chrome, Safari 및 Edge 스타일 스크롤 막대: 트랙, 썸, 썸의 호버 상태에 대한 별도의 규칙과 정확한 픽셀 너비 및 썸 테두리 반경. Firefox는 이 모든 것을 완전히 무시하고 대신 나중에 CSS 스크롤바 사양에 추가된 두 가지 표준 속성인 스크롤바 너비와 스크롤바 색상을 읽습니다. 이는 동일한 기능의 두 가지 방언이 아닙니다. 서로 다른 천장을 가진 두 가지 다른 기능 세트이며 대부분의 스크롤바 생성기는 WebKit 결과만 표시하여 조용히 공백을 메웁니다. 이것은 그렇지 않습니다.

너비, 트랙 색상, 썸 색상, 호버 색상 및 썸 모서리 반경을 한 번 설정하면 도구가 동일한 입력에서 두 개의 규칙 세트를 구축합니다. WebKit 블록 범위는 ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb 및 해당 :hover 상태를 왼쪽 데모 상자로 지정하므로 여기에 표시되는 내용은 Chrome, Safari 및 Edge가 렌더링하는 것과 정확히 같습니다. 즉, 시뮬레이션된 오버레이가 아닌 브라우저 자체의 실제 엔진입니다. Firefox 블록은 동일한 브라우저의 자체 엔진을 사용하여 오른쪽 데모 상자에 스크롤 막대 너비와 스크롤 막대 색상을 설정합니다. 이것이 바로 이 페이지가 Firefox에서 실제로 열려 있을 때만 상자가 다르게 보이는 이유입니다. WebKit 브라우저에서는 자체 기본 스크롤 막대가 표시되며 도구는 빌린 픽셀을 사용하여 Firefox 모양을 속이는 대신 그렇게 말합니다.

너비 매핑은 간격의 가장 명확한 예입니다. Firefox의 스크롤 막대 너비는 키워드 auto, Thin 또는 none만 허용하며 정확한 픽셀 수치는 허용하지 않습니다. 이 생성기는 존재하지 않는 가짜 픽셀 완벽한 Firefox 결과를 만들어내는 대신 선택한 너비를 정직하게 매핑하고(8px 이하는 얇아지고 더 넓은 것은 자동이 됨) 입력 옆에 결과 키워드를 표시합니다. Firefox는 또한 별도의 호버 색상, 독립적인 썸 테두리 반경 또는 단순히 스크롤 막대 색상의 두 번째 값이 아닌 트랙 색상을 설정할 방법이 없습니다. 이는 이 도구에서 누락된 것이 아니라 플랫폼의 영구적이고 실제 제한 사항입니다.

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