와플앱 도구 안내

CSS 스크롤바 생성기

  • CSS 스크롤바 생성기는 웹페이지 제작에 필요한 코드 조각을 만들거나 정리하는 도구입니다.
  • 제목, 설명, 색상, 규칙, 디자인 옵션을 입력하면 CSS나 HTML 메타 코드를 생성합니다.
  • 생성된 코드를 확인해 사이트 헤더, 스타일, SEO 설정에 붙여 넣을 수 있습니다.

CSS 스크롤바 생성기

스크롤바 너비, 색상, 둥근 정도를 조절해서 WebKit과 Firefox용 CSS를 만듭니다.

폭
thumb
track

스크롤 미리보기

오른쪽 스크롤바의 폭, 색상, 둥근 정도를 확인하세요.

CSS 스크롤바 스타일은 Chrome, Edge, Safari 같은 WebKit 계열과 Firefox에서 쓰는 속성이 다릅니다.

이 도구는 두 계열 코드를 같이 생성합니다.

콘텐츠가 길어야 스크롤바가 보이므로 이 박스는 일부러 긴 문장을 넣었습니다.

생성된 선택자를 원하는 박스에 적용하면 됩니다.

끝까지 스크롤해서 thumb hover 색상도 브라우저에서 확인할 수 있습니다.

전체 페이지에 적용하려면 선택자를 html 또는 body로 바꾸면 됩니다.

관련 도구