Today, when visiting Chongjing's blog, I noticed that the browser's default sidebar scrollbar on their website had been changed to a custom style. After searching online, I learned that this style can be designed using CSS. So I experimented with it myself and also borrowed the CSS code. This site is already using it, and you can see the effect for yourselves.

Note:

This style is limited to browsers using the Chromium engine, such as Google Chrome, QQ Browser, and 360 Browser. Browsers that do not use the Chromium engine will not display the style, such as Firefox and Opera.

CSS Code

Property Description

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

Example Code

Below is the CSS style used on this site. You can modify it as needed.

/* 滚动条默认显示样式 */
::-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;
}