Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS how to set the scroll bar style, the article introduces in great detail, has a certain reference value, interested friends must read it!

1. The CSS setting scroll bar under webkit

Above are the main setting properties of the scroll bar, as well as the CSS property in more detail

: horizontal: horizontal scroll bar

: vertical: vertical scroll bar

: decrement: applies to buttons and inner tracks (trackpiece). It is used to indicate whether the button or inner track reduces the position of the window (for example, the top of the vertical scroll bar and the left side of the horizontal scroll bar.)

Increment:decrement is similar to indicating whether the button or inner track increases the position of the window (for example, the bottom of the vertical scroll bar and the right side of the horizontal scroll bar.)

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

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

: double-button: this pseudo class is used for buttons and inner tracks. Used to determine whether a button is one of a pair of buttons placed at the same end of the scroll bar. For the inner orbit, it indicates whether the inner orbit is close to a pair of buttons.

: single-button: similar to the double-button pseudo class. For buttons, it is used to determine whether a button is independent in the section of the scroll bar. For the inner orbit, it indicates whether the inner orbit is close to a single-button.

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

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

: window-inactive: used for all scroll bar tracks to indicate whether a page container (element) to which the scroll bar is applied is currently active. In recent versions of webkit, this pseudo-class can also be used for:: selection pseudo-elements. The webkit team has plans to extend it and promote it as a standard pseudo-class)

2. Set the scroll bar under the CSS under IE

IE below is relatively simple, there are fewer custom items, all colors.

1. The color of scrollbar-arrow-color:color;/* triangular arrow * /

2. The color of the scrollbar-face-color:color;/* stereoscopic scroll bar (including the background color of the arrow part) * /

3. The color of the bright edge of the scrollbar-3dlight-color:color;/* stereo scroll bar * /

4. Highlight color of scrollbar-highlight-color:color;/* scroll bar (left shadow? ) * /

5. Color of shadow in scrollbar-shadow-color:color;/* stereo scroll bar * /

6. The color of shadows outside the scrollbar-darkshadow-color:color;/* stereo scroll bar * /

7. Background color of scrollbar-track-color:color;/* stereo scroll bar * /

8. Base color of scrollbar-base-color:color;/* scroll bar * /

The above is all the contents of the article "how to style the scroll bar in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.