---
title: "CSS로 사용자 지정 브라우저 스크롤바 스타일 구현 - 근심을 잊는 한 장"
description: "오늘 憧憬 블로그를 방문했을 때, 해당 사이트의 브라우저 기본 사이드 스크롤바가 사용자 지정 스타일로 변경되어 있는 것을 발견했습니다. 이후 인터넷으로 검색해 보니, 해당 스타일은 CSS를 통해 디자인할 수 있다는 것을 알게 되었습니다. 그래서 직접 조금 수정해 보고, 겸사겸사 CSS "
canonical_url: "https://www.ikxin.com/ko/article/css-scrollbar-styling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "오늘 憧憬 블로그를 방문했을 때, 해당 사이트의 브라우저 기본 사이드 스크롤바가 사용자 지정 스타일로 변경되어 있는 것을 발견했습니다. 이후 인터넷으로 검색해 보니, 해당 스타일은 CSS를 통해 디자인할 수 있다는 것을 알게 되었습니다. 그래서 직접 조금 수정해 보고, 겸사겸사 CSS "
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~Q1NT66GcIOyCrOyaqeyekCDsp4DsoJUg67iM65287Jqw7KCAIOyKpO2BrOuhpOuwlCDsiqTtg4Dsnbwg6rWs7ZiEIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~Q1NT66GcIOyCrOyaqeyekCDsp4DsoJUg67iM65287Jqw7KCAIOyKpO2BrOuhpOuwlCDsiqTtg4Dsnbwg6rWs7ZiE%2Cdescription_~7Jik64qYIOaGp-aGrCDruJTroZzqt7jrpbwg67Cp66y47ZaI7J2EIOuVjCwg7ZW064u5IOyCrOydtO2KuOydmCDruIzrnbzsmrDsoIAg6riw67O4IOyCrOydtOuTnCDsiqTtgazroaTrsJTqsIAg7IKs7Jqp7J6QIOyngOyglSDsiqTtg4DsnbzroZwg67OA6rK965CY7Ja0IOyeiOuKlCDqsoPsnYQg67Cc6rKs7ZaI7Iq164uI64ukLiDsnbTtm4Qg7J247YSw64S37Jy866GcIOqygOyDie2VtCDrs7Tri4gsIO2VtOuLuSDsiqTtg4DsnbzsnYAgQ1NT66W8IO2Gte2VtCDrlJTsnpDsnbjtlaAg7IiYIOyeiOuLpOuKlCDqsoPsnYQg7JWM6rKMIOuQmOyXiOyKteuLiOuLpC4g6re4656Y7IScIOyngeygkSDsobDquIgg7IiY7KCV7ZW0IOuztOqzoCwg6rK47IKs6rK47IKsIENTUyA%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2Nzcy1zY3JvbGxiYXItc3R5bGluZyI%2Cs_2kfeZp1U-6pYfcQn.png"
  "og:image:alt": "CSS로 사용자 지정 브라우저 스크롤바 스타일 구현 - 근심을 잊는 한 장"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "CSS로 사용자 지정 브라우저 스크롤바 스타일 구현"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~Q1NT66GcIOyCrOyaqeyekCDsp4DsoJUg67iM65287Jqw7KCAIOyKpO2BrOuhpOuwlCDsiqTtg4Dsnbwg6rWs7ZiEIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~Q1NT66GcIOyCrOyaqeyekCDsp4DsoJUg67iM65287Jqw7KCAIOyKpO2BrOuhpOuwlCDsiqTtg4Dsnbwg6rWs7ZiE%2Cdescription_~7Jik64qYIOaGp-aGrCDruJTroZzqt7jrpbwg67Cp66y47ZaI7J2EIOuVjCwg7ZW064u5IOyCrOydtO2KuOydmCDruIzrnbzsmrDsoIAg6riw67O4IOyCrOydtOuTnCDsiqTtgazroaTrsJTqsIAg7IKs7Jqp7J6QIOyngOyglSDsiqTtg4DsnbzroZwg67OA6rK965CY7Ja0IOyeiOuKlCDqsoPsnYQg67Cc6rKs7ZaI7Iq164uI64ukLiDsnbTtm4Qg7J247YSw64S37Jy866GcIOqygOyDie2VtCDrs7Tri4gsIO2VtOuLuSDsiqTtg4DsnbzsnYAgQ1NT66W8IO2Gte2VtCDrlJTsnpDsnbjtlaAg7IiYIOyeiOuLpOuKlCDqsoPsnYQg7JWM6rKMIOuQmOyXiOyKteuLiOuLpC4g6re4656Y7IScIOyngeygkSDsobDquIgg7IiY7KCV7ZW0IOuztOqzoCwg6rK47IKs6rK47IKsIENTUyA%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2Nzcy1zY3JvbGxiYXItc3R5bGluZyI%2Cs_2kfeZp1U-6pYfcQn.png"
  "twitter:image:alt": "CSS로 사용자 지정 브라우저 스크롤바 스타일 구현 - 근심을 잊는 한 장"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **CSS로 사용자 지정 브라우저 스크롤바 스타일 구현**

2017.07.08 4,439  0

오늘 憧憬 블로그를 방문했을 때, 해당 사이트의 브라우저 기본 사이드 스크롤바가 사용자 지정 스타일로 변경되어 있는 것을 발견했습니다. 이후 인터넷으로 검색해 보니, 해당 스타일은 **CSS**를 통해 디자인할 수 있다는 것을 알게 되었습니다. 그래서 직접 조금 수정해 보고, 겸사겸사 **CSS** 코드도 가져와서 저희 사이트에 적용했습니다. 효과는 직접 확인해 보시면 됩니다.

**주의:**

해당 스타일은 구글 브라우저, QQ 브라우저, 360 브라우저 등 **Chromium** 엔진 기반 브라우저에서만 사용할 수 있습니다. Firefox 브라우저, 오페라 브라우저 등 **Chromium** 엔진 기반이 아닌 브라우저에서는 스타일이 표시되지 않습니다.

## CSS 코드

### 속성 설명

 Plain Text

```
::-webkit-scrollbar               /* 滚动条整体部分 */::-webkit-scrollbar-button        /* 滚动条两端的按钮 */::-webkit-scrollbar-track         /* 外层轨道 */::-webkit-scrollbar-track-piece   /* 内层轨道滚动条中间部分 */::-webkit-scrollbar-thumb         /* 滚动条里面可以拖动的部分 */::-webkit-scrollbar-corner        /* 边角 */::-webkit-resizer                 /* 定义右下角拖动块的样式 */
```

### 예시 코드

아래는 저희 사이트에서 사용하는 **CSS** 스타일로, 필요에 따라 직접 수정할 수 있습니다.

 CSS

```
/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
   background-color: #03a9f4;
   height: 50px;
   outline-offset: -2px;
   outline: 2px solid #cddc39;
   -webkit-border-radius: 4px;
   border: 2px solid #fff;
}

/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
   background-color: #00bcd4;
   height: 50px;
   -webkit-border-radius: 4px;
}

/* 滚动条宽度与高度 */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
   background-color: #fff;
   -webkit-border-radius: 0;
}
```

## **댓글**

(0)

아직 댓글이 없습니다

## **댓글 작성**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/css-scrollbar-styling#webpage","@type":"WebPage","description":"오늘 憧憬 블로그를 방문했을 때, 해당 사이트의 브라우저 기본 사이드 스크롤바가 사용자 지정 스타일로 변경되어 있는 것을 발견했습니다. 이후 인터넷으로 검색해 보니, 해당 스타일은 CSS를 통해 디자인할 수 있다는 것을 알게 되었습니다. 그래서 직접 조금 수정해 보고, 겸사겸사 CSS ","name":"CSS로 사용자 지정 브라우저 스크롤바 스타일 구현","url":"https://www.ikxin.com/ko/article/css-scrollbar-styling","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/css-scrollbar-styling"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.