Without further ado, let’s go directly to the demo, with detailed notes at the bottom.
1. This is the style displayed under the webkit browser.
The method of setting the width and height of the scroll bar is as follows)

The following is the code:
1 2 3 4 5 6 7 8 9 | <p id='scroll'>
<p >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime at quidem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt!</p>
</p>
</p>
|
Copy after login
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | #scroll{
width:200px;
height:200px;
overflow:auto;
margin-bottom: 20px;
}
#scroll p{
width:400px;
height:400px;
}
#scroll::-webkit-scrollbar{
width:10px;
height:10px;
}
#scroll::-webkit-scrollbar-button{
background:#74D334;
}
#scroll::-webkit-scrollbar-track{
background:#FF66D5;
}
#scroll::-webkit-scrollbar-track-piece{
background:#FF66D5;
}
#scroll::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
#scroll::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll::-webkit-scrollbar-resizer {
background:#FF0BEE;
}
#scroll{
scrollbar-arrow-color: #f4ae21;
scrollbar-face-color: #333;
scrollbar-3dlight-color: #666;
scrollbar-highlight-color: #666;
scrollbar-shadow-color: #999;
scrollbar-darkshadow-color: #666;
scrollbar-track-color: #666;
scrollbar-base-color:#f8f8f8;
}
|
Copy after login
Simple version (IE style can just default to it)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #scroll-2{
width:200px;
height:200px;
overflow:auto;
margin-bottom: 20px;
}
#scroll-2 p{
width:400px;
height:400px;
}
#scroll-2::-webkit-scrollbar{
width:4px;
height:4px;
}
#scroll-2::-webkit-scrollbar-track{
background: #E6E6E6;
}
#scroll-2::-webkit-scrollbar-thumb{
background: #747474;
border-radius:2px;
}
#scroll-2::-webkit-scrollbar-corner{
background: #E6E6E6;
}
|
Copy after login
Webkit browser scroll bar style setting location reference is as follows:

IE browser scroll bar style setting location reference is as follows

The above is the detailed content of How to set code graphics and text compatible with IE scroll bar style using CSS. For more information, please follow other related articles on the PHP Chinese website!