---
title: "CSS 实现自定义浏览器滚动条样式 - 一纸忘忧"
description: "今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 CSS 来设计。于是我自己捣鼓了一下，顺便把 CSS 代码借了过来，本站已经用上了，效果大家可以自己看看。"
canonical_url: "https://www.ikxin.com/article/css-scrollbar-styling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 CSS 来设计。于是我自己捣鼓了一下，顺便把 CSS 代码借了过来，本站已经用上了，效果大家可以自己看看。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~Q1NTIOWunueOsOiHquWumuS5iea1j-iniOWZqOa7muWKqOadoeagt-W8jyAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~Q1NTIOWunueOsOiHquWumuS5iea1j-iniOWZqOa7muWKqOadoeagt-W8jw%2Cdescription_~5LuK5aSp6K6~6Zeu5oan5oas5Y2a5a6i5pe277yM5Y-R546w5LuW572R56uZ55qE5rWP6KeI5Zmo6buY6K6k5L6n6L655rua5Yqo5p2h6KKr5L-u5pS55oiQ5LqG6Ieq5a6a5LmJ5qC35byP44CC5ZCO5p2l5LiK572R5p-l6K-i5LqG5LiA5LiL77yM5b6X55-l6K-l5qC35byP5Y-v5Lul6YCa6L-HIENTUyDmnaXorr7orqHjgILkuo7mmK~miJHoh6rlt7HmjaPpvJPkuobkuIDkuIvvvIzpobrkvr~mioogQ1NTIOS7o-eggeWAn-S6hui~h-adpe-8jOacrOermeW3sue7j-eUqOS4iuS6hu-8jOaViOaenOWkp-WutuWPr-S7peiHquW3seeci-eci-OAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2Nzcy1zY3JvbGxiYXItc3R5bGluZyI%2Cs_bnN2kjKAUtR5CNma.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_~Q1NTIOWunueOsOiHquWumuS5iea1j-iniOWZqOa7muWKqOadoeagt-W8jyAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~Q1NTIOWunueOsOiHquWumuS5iea1j-iniOWZqOa7muWKqOadoeagt-W8jw%2Cdescription_~5LuK5aSp6K6~6Zeu5oan5oas5Y2a5a6i5pe277yM5Y-R546w5LuW572R56uZ55qE5rWP6KeI5Zmo6buY6K6k5L6n6L655rua5Yqo5p2h6KKr5L-u5pS55oiQ5LqG6Ieq5a6a5LmJ5qC35byP44CC5ZCO5p2l5LiK572R5p-l6K-i5LqG5LiA5LiL77yM5b6X55-l6K-l5qC35byP5Y-v5Lul6YCa6L-HIENTUyDmnaXorr7orqHjgILkuo7mmK~miJHoh6rlt7HmjaPpvJPkuobkuIDkuIvvvIzpobrkvr~mioogQ1NTIOS7o-eggeWAn-S6hui~h-adpe-8jOacrOermeW3sue7j-eUqOS4iuS6hu-8jOaViOaenOWkp-WutuWPr-S7peiHquW3seeci-eci-OAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2Nzcy1zY3JvbGxiYXItc3R5bGluZyI%2Cs_bnN2kjKAUtR5CNma.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,423  0

今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 **CSS** 来设计。于是我自己捣鼓了一下，顺便把 **CSS** 代码借了过来，本站已经用上了，效果大家可以自己看看。

**注意：**

该样式仅限于 **Chromium** 内核的浏览器，比如谷歌浏览器、QQ 浏览器、360 浏览器等。非 **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/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/css-scrollbar-styling#webpage","@type":"WebPage","description":"今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 CSS 来设计。于是我自己捣鼓了一下，顺便把 CSS 代码借了过来，本站已经用上了，效果大家可以自己看看。","name":"CSS 实现自定义浏览器滚动条样式","url":"https://www.ikxin.com/article/css-scrollbar-styling","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/css-scrollbar-styling"]}]}]}
```

## Sitemap

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