무료 온라인 스크롤바 CSS 사용자 정의 도구
기본 브라우저 스크롤 막대가 항상 디자인과 일치하는 것은 아닙니다. Dokall의 스크롤바 사용자 정의 기능을 사용하면 CSS을 복사하기 전에 트랙 및 썸 색상을 선택하고, 너비를 설정하고, 결과를 실시간으로 미리 볼 수 있습니다.
생성된 CSS에는 WebKit 및 Firefox 호환 규칙이 모두 포함됩니다. 세련된 브랜드 스크롤 경험을 위해 스타일시트에 스니펫을 추가하세요.
도구 로딩 중…
스크롤 막대 색상과 크기를 사용자 정의한 다음 CSS을 복사합니다.
도구 로딩 중…
기본 브라우저 스크롤 막대가 항상 디자인과 일치하는 것은 아닙니다. Dokall의 스크롤바 사용자 정의 기능을 사용하면 CSS을 복사하기 전에 트랙 및 썸 색상을 선택하고, 너비를 설정하고, 결과를 실시간으로 미리 볼 수 있습니다.
생성된 CSS에는 WebKit 및 Firefox 호환 규칙이 모두 포함됩니다. 세련된 브랜드 스크롤 경험을 위해 스타일시트에 스니펫을 추가하세요.
body {
--sb-track-color: #232E33;
--sb-thumb-color: #6BAF8D;
--sb-size: 14px;
scrollbar-width: thin;
scrollbar-color: #6BAF8D #232E33;
}
body::-webkit-scrollbar {
width: var(--sb-size);
height: var(--sb-size);
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 3px;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 3px;
}