How to implement custom scroll bar style in css3? (code)

不言
Release: 2018-08-09 16:54:19
Original
1910 people have browsed it

The content of this article is about how to implement custom scroll bar style in css3? (code), it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS3 custom scroll bar style
Scroll bar composition
::-webkit-scrollbar Scroll bar overall part
::-webkit-scrollbar-thumb Scroll bar slider
: :-webkit-scrollbar-track Scroll bar sliding track
::-webkit-scrollbar-button Buttons at both ends of the scroll bar
::-webkit-scrollbar-track-piect Scroll bar as a whole minus the slider part

css code is as follows:

.content{
    over-flow:auto;
}
.content::-webkit-scrollbar{
     width:4px;     设置轨道宽度
}
.content::-webkit-scrollbar-thumb{         
    border-radius: 10px;
    background-color: #333;
    -webkit-box-shadow:inset(0px,0px,5px,#555);
}
.content::-webkit-scrollbar-track{
    border-radius:10px;
    background-color:#999;
   -webkit-box-shadow:inset(0px,0px,5px,#555);
}
Copy after login

Related recommendations:

How to implement a check mark on the menu in css? (Code)

CSS3 property: How to use text-shadow text shadow

The above is the detailed content of How to implement custom scroll bar style in css3? (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!