CSS setting scroll bar style

WebKit browser CSS Settings scroll bar

There are 7 main properties below

1. ::-webkit-scrollbar The whole part of the scroll bar, you can set the width of what
2. ::-webkit-scrollbar-button buttons at both ends of the scroll bar
3. ::-webkit-scrollbar-track Outer Track
4. ::-webkit-scrollbar-track-piece inner Rolling Groove
5. ::-webkit-scrollbar-thumb scrolling Slider
6. ::-webkit-scrollbar-corner Corner
7. ::-webkit-resizer Define the style of the drag block in the lower right corner

Example of the specific reference

Above are the main settings properties of the scroll bar, as well as more detailed CSS properties

: Horizontal horizontal direction of scroll bar

: Vertical Vertical scroll bar

The :d ecrement is applied to button and inner tracks (track piece). It is used to indicate whether the button or inner track will reduce the position of the window (for example, the top of the vertical scroll bar, the left side of the horizontal scrollbar). )

: Increment decrement is similar to indicating whether a button or inner track will increase the position of the viewport (for example, the bottom of the vertical scrollbar and the right side of the horizontal scrollbar). )

: The start pseudo-class is also applied to buttons and sliders. It is used to define whether the object is placed in front of the slider.

: End is similar to the start pseudo class, which identifies whether the object is placed behind the slider.

:d Ouble-button the Pseudo-class for use in buttons and inner tracks. Used to determine if a button is one of a pair of buttons placed on the same side of the ScrollBar. For an inner track, it indicates whether the inner track is close to a pair of buttons.

: Single-button similar to Double-button pseudo class. For a button, it is used to determine whether a button is independent of a section of the scrollbar. In the inner layer, it indicates whether the inner track is close to a single-button.

: The No-button is used for inner tracks, indicating whether the inner track is to be scrolled to the end of the scrollbar, for example, when there are no buttons at both ends of the scroll bar.

: The Corner-present is used for all scroll bar tracks, indicating whether the scrollbar fillet is displayed.

: The window-inactive is used for all scrollbar tracks, indicating whether a page container (element) that applies the scroll bar is currently active. (in the recent version of WebKit, this pseudo-class can also be used for:: Selection pseudo-elements.) The WebKit team has plans to extend it and push it into a standard pseudo-Class)

Write an example demo (please watch under the WebKit browser), can not say no practice. CSS is also very simple.

• /* Set the style of the scroll bar */
• ::-webkit-scrollbar {
• Width: 12px;
• }
• /* Scroll Groove */
• ::-webkit-scrollbar-track {
• -webkit-box-shadow: inset 0 0 6px rgba (0,0,0,0.3);
• Border-radius: 10px;
• }
• /* ScrollBar Slider */
• ::-webkit-scrollbar-thumb {
• Border-radius: 10px;
• Background: Rgba (0,0,0,0.1);
• -webkit-box-shadow: inset 0 0 6px rgba (0,0,0,0.5);
• }
• ::-webkit-scrollbar-thumb: Window-inactive {
• Background: Rgba (255,0,0,0.4);
• }

CSS settings scroll bar under IE

IE is relatively simple under that, the custom project is relatively small, all color.

1. Scrollbar-arrow-color:color; /* The color of the triangular arrows */
2. Scrollbar-face-color:color; /* Color of the stereo scrollbar (including the background color of the arrow part) */
3. Scrollbar-3dlight-color:color; /* Color of the solid scroll bar */
4. Scrollbar-highlight-color:color; /* Highlight color of scroll bar (left shadow?) ）*/
5. Scrollbar-shadow-color:color; /* Color of the stereoscopic scrollbar shadow */
6. Scrollbar-darkshadow-color:color; /* Color of the outer shadow of the stereoscopic scroll bar */
7. Scrollbar-track-color:color; /* Stereo scroll bar background color */
8. Scrollbar-base-color:color; /* The base color of the scroll bar */

Browser scroll bar Plugin

Finally, under the trough, as the three major browsers Firefox temporarily did not find the relevant CSS. A few years ago, Firefox was very hot, market share once threatened the first position of IE. In the last two years, Firefox has had few bright spots in addition to the upgrade version number, the boot speed is still very slow, memory consumption is high, and CSS3 and HTML5 support are all behind the browsers. Previously because Firefox plugin more, in the number and quality of plug-ins to catch up with chrome, there is no reason to use Firefox, decisively switch to Chrome.

Reproduced from the front-end development http://www.javascript100.com/?p=756