Detailed explanation of how to write css3 custom scroll bar style

In this article, we mainly share with you how to write CSS3 custom scroll bar styles. First, we will briefly introduce each attribute. The article will show you four effects. Hope it helps everyone.

1. ::-webkit-scrollbar : The overall part of the scroll bar, the properties of which include width, height, background, border, etc.

2. ::-webkit-scrollbar-button : Buttons at both ends of the scroll bar. You can use display:none to not display it, or you can add a background image and color to change the display effect.

3. ::-webkit-scrollbar-track : Outer track. You can use display:none to not display it, or you can add a background image and color to change the display effect.

4. ::-webkit-scrollbar-track-piece : Inner track, see the gif below for specific differences. It should be noted that it will override the style of the third attribute.

5. ::-webkit-scrollbar-thumb : The part of the scroll bar that can be dragged

6. ::-webkit-scrollbar-corner : Corner, the intersection of two scroll bars

7. ::-webkit-resizer : The intersection of two scroll bars is a small control used to drag and adjust the size of elements (basically not used )

Let’s look at a few comparisons

---

Effect 1

##The css code for the scroll bar effect in the above picture is as follows. By default, this part is the original code. Subsequent modifications to the renderings will be modified on this basis.

/*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

        ::-webkit-scrollbar {            width: 10px; /*对垂直流动条有效*/
            height: 10px; /*对水平流动条有效*/
        }

        /*定义滚动条的轨道颜色、内阴影及圆角*/
        ::-webkit-scrollbar-track{            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);            background-color: rosybrown;            border-radius: 3px;        }


       /*定义滑块颜色、内阴影及圆角*/
        ::-webkit-scrollbar-thumb{            border-radius: 7px;            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);            background-color: #E8E8E8;        }

        /*定义两端按钮的样式*/
        ::-webkit-scrollbar-button {            background-color:cyan;        }

        /*定义右下角汇合处的样式*/
       ::-webkit-scrollbar-corner {            background:khaki;        }

---

Effect 2

Add the following code to the original code above

        ::-webkit-scrollbar-track-piece {
            background-color: darkred;

        }

It can be seen that the style of the previous::-webkit-scrollbar-track attribute is overwritten

---

Effect three

Add the following code to the original code above

        ::-webkit-scrollbar-track-piece {            background-color: darkred;            background-image:url(https://www.baidu.com/img/baidu_jgylogo3.gif);        }

Now can you understand the difference between the inner track and the outer track mentioned above?

---

Effect Four

Change the ::-webkit-scrollbar-track attribute of the original code to

 ::-webkit-scrollbar-track{            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);            background-image:url(https://www.baidu.com/img/baidu_jgylogo3.gif);            background-color: rosybrown;            border-radius: 3px;        }

---

Everyone carefully observe the above situations and draw conclusions.

Related recommendations:

html scroll bar style settings

CSS control scroll bar style parsing

Code example of scroll bar style setting in CSS (picture)

The above is the detailed content of Detailed explanation of how to write css3 custom scroll bar style. For more information, please follow other related articles on the PHP Chinese website!