Carefree

Using CSS to Create Custom Browser Scrollbar Styles

4,344 0

Today, while visiting Chongzhi's blog, I noticed that the browser's default sidebar scrollbar on his website had been modified with a custom style. After searching online, I learned that this style could be designed using CSS. So I experimented with it myself and borrowed the CSS code as well. It is already in use on this site, and you can see the effect for yourselves.

Note:

This style is only available in browsers based on the Chromium engine, such as Google Chrome, QQ Browser, and 360 Browser. Browsers that are not based on the Chromium engine will not display the style, such as Firefox and Opera.

CSS Code

Property Description

Plain Text
::-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 according to your needs.

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;
}

Comments

(0)

No comments yet. Start the conversation.

Leave a comment