CSS How to set the compatible IE scroll bar style code graphics

Not much nonsense to say, directly on the demo, the bottom of the detailed comments.

1. This is the style displayed under the WebKit browser.

(personal prefer simple point)

2, in the IE browser display style (in order to distinguish so that the style of writing is not the same, I did not find the method of setting the width of the scroll bar in IE)

Here's the code:

<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 i Taque 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 exercitati Onem Corrupti debitis tempore omnis Maxime at quidem!</p> <p>lorem ipsum dolor sit amet, Consectetu R adipisicing elit. Architecto voluptatem Dolores AB dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet Quasi und e 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>

#scroll {width:200px;        height:200px; overflow:auto;margin-bottom:20px;} #scroll p{width:400px;height:400px;} #scroll::-webkit-scrollbar{/* The whole part of the scroll bar, where the properties are Width,height,background,border (just like a block-level element) (position 1) */width:10px;height : 10px;} #scroll::-webkit-scrollbar-button{/* the buttons at both ends of the scroll bar, you can use Display:none to let it not display, you can add a background image, color change the display effect (position 2) */background: #74D334;} #scroll::-webkit-scrollbar-track{/* outer Track, you can use Display:none to let it not display, you can add a background image, color change the display effect (position 3) */background: #FF66D5;} #scroll::-webkit-scrollbar-track-piece{/* inner track, scroll bar middle section (position 4) */background: #FF66D5;} #scroll::-webkit-scrollbar-thumb{/* the part that can be dragged inside the scroll bar (position 5) */background: #FFA711; border-radius:4px;} #scroll::-webkit-scrollbar-corner {/* Corner (position 6) */background: #82AFFF;} #scroll::-webkit-scrollbar-resizer {/* Define the style of the drag block in the lower right corner (position 7) */background: #FF0BEE;} #scroll {scrollbar-arrow-color: #f4ae21;/**//* triangle Arrow Color */scrollbar-face-color: #333;/**//* the color of the scroll bar */ Scrollbar-3dlight-color: #666; /**//* color of the solid scroll bar */scrollbar-highlight-color: #666; /**//* the color of the blank part of the scroll bar */scrollbar-shadow-cOlor: #999; /**//* color of the stereoscopic scrollbar Shadow */Scrollbar-darkshadow-color: #666; /**//* the color of the strong shadow of the three-dimensional scroll bar */scrollbar-track-color: #666; /**//* solid scroll bar background color */scrollbar-base-color: #f8f8f8; /**//* the basic color of the scroll bar */}

Simple version (ie style directly default on the line)

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

The WebKit browser scroll bar style setting location is as follows:

IE browser scroll bar style setting location reference as