Detailed example of CSS3 custom scroll bar style

In the previous article, we introduced to you CSS to set the div scroll bar style. We all know thatwhen the content exceeds the container, the container will have a scroll bar, and its own Sometimes the scroll bar cannot meet our aesthetic requirements, so we can customize the scroll bar through css pseudo-class.

First we need to understand the scroll bar. The scroll bar is composed of two parts from the appearance: 1. The sliding part, we call it the slider. 2. The track of the scroll bar, that is, the track of the slider. Generally speaking, the color of the slider is darker than the color of the track.

The CSS style of the scroll bar mainly consists of three parts:

1. ::-webkit-scrollbar Defines the overall style of the scroll bar;

2. ::-webkit -scrollbar-thumb Slider part;

3. ::-webkit-scrollbar-thumb Track part;

The following uses overflow-y:auto; as an example ( overflow-x: auto is the same)

html code:

<p class="test test-1">
		<p class="scrollbar"></p>
</p>

css code:

    .test{
    	width: 50px;
    	height: 200px;
    	overflow: auto;
    	float: left;
    	margin: 5px;
    	border: none;
    }
    .scrollbar{
    	width: 30px;
    	height: 300px;
    	margin: 0 auto;

    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

The effect is as follows:

If you want to change the width of the scroll bar: change it in ::-webkit-scrollbar; if you want to change the rounded corners of the scroll bar slider, change it in ::-webkit-scrollbar-thumb; If you want to change the rounded corners of the track, change it in ::-webkit-scrollbar-track;

In addition, the slider of the scroll bar can not only be filled with color but also with images as follows:

css code :

    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            /*border-radius: 10px;*/
            background: #EDEDED;
        }

html code:

	<p class="test test-5">
		<p class="scrollbar"></p>
	</p>

The effect is as follows:

Summary:

I believe that through the above example learning, friends can make their own scroll bars. If there are multiple scroll bars in the document, and you want all scroll bars to be the same style, then There is no need to add anything like class, id, tag name, etc. in front of the pseudo-element.

Related recommendations:

Example of CSS setting div scroll bar style

How to solve the scroll bar style problem

## Examples of div scroll bar style design in #html

The above is the detailed content of Detailed example of CSS3 custom scroll bar style. For more information, please follow other related articles on the PHP Chinese website!