맞춤 스크롤바가 모든 브라우저에서 동작하나요?

똑같이 동작하지는 않습니다. scrollbar-color와 scrollbar-width는 Firefox와 최신 Chrome, Edge에서 동작하고, ::-webkit- 규칙은 구형 Chrome, Edge, Safari를 보완합니다. 도구는 둘 다 내보내지만 두 엔진은 스크롤바를 다르게 그리며 어떤 CSS로도 완전히 같게 만들 수는 없습니다.

scrollbar-color가 무엇인가요?

손잡이와 트랙 색상을 한 선언으로 지정하는 표준 속성입니다. 손잡이를 먼저, 트랙을 나중에 씁니다. CSS Scrollbars Styling 모듈의 일부이므로 이쪽부터 시작하는 것이 맞습니다.

왜 WebKit CSS까지 넣나요?

표준 속성은 색상과 대략적인 너비만 노출하고, 구형 WebKit과 Blink는 그것들을 지원하지 않기 때문입니다. 접두사 규칙은 명시적인 크기와 모서리를 더하고 그런 브라우저를 보완합니다.

스크롤바를 아예 숨겨도 되나요?

조심하세요. scrollbar-width: none은 그 영역이 스크롤된다는 눈에 보이는 단서와 끌어서 이동하는 수단을 없앱니다. 휠이나 트랙패드를 쓰지 않는 사람에게 불리합니다. 얇고 대비가 좋은 막대를 고려해 보세요.

분류: 개발 도구

CSS 스크롤바 생성기

자체 기획 도구찾는 도구가 없나요?

맞춤 스크롤바 CSS를 실시간 미리보기와 함께 로컬에서 생성

실시간 미리보기로 맞춤 스크롤바를 디자인하고 scrollbar-color, scrollbar-width, WebKit 스타일용 CSS를 복사하세요. 브라우저에서 생성됩니다.

선택자

손잡이트랙호버 시 손잡이

WebKit 너비 10px모서리 8px

WebKit 규칙 포함호버 상태 포함

미리보기

이 패널을 스크롤하면 설정한 스크롤바를 확인할 수 있습니다.

출력

/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
  scrollbar-color: #8a9a8f #eceee9;
  scrollbar-width: thin;
}

/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-area::-webkit-scrollbar-track {
  background: #eceee9;
  border-radius: 8px;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #8a9a8f;
  border-radius: 8px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #6f8076;
}

scrollbar-color와 scrollbar-width가 표준 속성이며 Firefox와 최신 Chrome이 사용하는 것입니다. ::-webkit- 규칙은 구형 Chrome, Edge, Safari를 위해 남겨 둔 비표준 접두사입니다. 두 엔진의 렌더링은 동일하지 않습니다.

미리보기와 생성된 CSS 모두 브라우저 안에서 만들어집니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

스크롤바 꾸미기는 두 갈래로 나뉘어 있습니다. CSS Scrollbars Styling 모듈은 `scrollbar-color`와 `scrollbar-width` 두 속성을 제공하며, Firefox를 포함한 넓은 지원과 의도적으로 제한된 제어를 갖습니다. 더 오래된 `::-webkit-scrollbar` 의사 요소는 훨씬 많은 것을 할 수 있지만 비표준 접두사입니다. 이 생성기는 표준 속성을 먼저, 그다음에 라벨을 붙인 WebKit 블록을 내보냅니다. 두 가지가 같은 것인 척하지 않으면서 넓은 지원 범위를 얻기 위해서입니다. 둘의 렌더링은 같지 않으며, 스크롤바는 사람들이 실제로 의지하는 조작 요소이기 때문에 여기 미리보기는 그림이 아니라 실제로 스크롤됩니다.

사용 방법

스타일을 적용할 요소의 선택자를 정하고 손잡이, 트랙, 호버 색상을 고르세요.
scrollbar-width를 고르고 WebKit 너비와 모서리를 설정하세요.
미리보기를 스크롤해 확인한 뒤 CSS를 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

맞춤 스크롤바가 모든 브라우저에서 동작하나요?: 똑같이 동작하지는 않습니다. scrollbar-color와 scrollbar-width는 Firefox와 최신 Chrome, Edge에서 동작하고, ::-webkit- 규칙은 구형 Chrome, Edge, Safari를 보완합니다. 도구는 둘 다 내보내지만 두 엔진은 스크롤바를 다르게 그리며 어떤 CSS로도 완전히 같게 만들 수는 없습니다.
scrollbar-color가 무엇인가요?: 손잡이와 트랙 색상을 한 선언으로 지정하는 표준 속성입니다. 손잡이를 먼저, 트랙을 나중에 씁니다. CSS Scrollbars Styling 모듈의 일부이므로 이쪽부터 시작하는 것이 맞습니다.
왜 WebKit CSS까지 넣나요?: 표준 속성은 색상과 대략적인 너비만 노출하고, 구형 WebKit과 Blink는 그것들을 지원하지 않기 때문입니다. 접두사 규칙은 명시적인 크기와 모서리를 더하고 그런 브라우저를 보완합니다.
스크롤바를 아예 숨겨도 되나요?: 조심하세요. scrollbar-width: none은 그 영역이 스크롤된다는 눈에 보이는 단서와 끌어서 이동하는 수단을 없앱니다. 휠이나 트랙패드를 쓰지 않는 사람에게 불리합니다. 얇고 대비가 좋은 막대를 고려해 보세요.

이 도구로 할 수 있는 일

사용 방법

개인정보

자주 묻는 질문

관련 도구