CSS setting div scroll bar Style example

In our daily development work, many pages need to scroll bar function, he more convenient to use the user to the Site page experience, then in the DIV scroll bar style There are many kinds of, then we will introduce you to the CSS set div scroll bar Style example!

Example of a div scroll bar style

<style type= "Text/css" >.scroll{width:100px;height:200px;overflow:auto;/* automatically appear scroll bar, if you want to appear vertical scroll bar is changed to: overflow-y: Auto, if the horizontal scroll bar is changed to: Overflow-x:auto*/scrollbar-face-color: #F00;/* The Color of the bulge of the scrollbar (foreground color), including the square button at both ends, the color of the slider sliding horizontally or vertically */ Scrollbar-track-color: #FFF; */* The background color of the scrollbar, if omitted, the virtual point will appear, the color will be Face-color color */scrollbar-arrow-color: #FFF;/* button ( The color of the triangular arrows can be clicked on or around the square button that makes the slider scroll */scrollbar-3dlight-color: #0F0;/* The color of the scroll bar bright edges, creating a 3D effect, a layered sense, Visual inspection A colored line appears on the left and top of the scrollbar (vertical scrolling) */scrollbar-darkshadow-color: #00F;/* The color of the strong shadow of the ScrollBar, the bottom of the scroll bar and the right side of the eye * * Scrollbar-highlight-color: #F0F; */* The color of the blank part of the scroll bar, the naked eye changes are not obvious, the specific color changes appear in the left and upper margin, There is a blank color between the Face-color effect and the 3dlingt-color effect (the default is white). In addition, the front of the scrollbar has a sunken feeling, the surrounding line color raised */scrollbar-shadow-color: #006600;/* The color of the solid ScrollBar Shadow, which appears on the right and bottom of the slider and square button, creating a shadow effect, The color between the Face-color effect and the Darkshadow-color effect, is not very obvious */scrollbar-base-color: #0f0;/* The basic color of the scrollbar, when the first 7 effects appear, the scrollbar basic color settings are difficult to see the naked eye, If you do not set the first 7 effects, the system will automatically set according to Base-color, where the foreground color, background (virtual point) colors are the same, other effects (shadows are filled with black), there is no requirement to set this effect *//*scrollbar-face-color:# F00;scrollbar-track-color: #FFF; Scrollbar-arrow-color: #FFF; These 3 effects recommendations must be set */}.font{color: #006600}</style><div class= "Scroll" > <p> text content </p> <p> text content </p> <p> Text content </p> <p> text content </p> <p> text content </p> <p> content </p> <p> text content </p> < p> text content </p> <p> text content </p> <p> text content </p> <p> content </p> <p> text content </p > <p> text content </p> <p> text content </p></div>

Summarize:

This article through the demonstration of the example, to the small partners introduced the CSS Settings div scroll bar style, hope to help you work!

Related recommendations:

code example for ScrollBar style settings in CSS (figure)

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

An example of a div scroll bar style design in HTML