How to implement CSS3 custom scroll bar Styles

This article mainly introduces the CSS3 custom scroll bar Style sample code, the content is very good, now share to everybody, also for everybody to make a reference.

Scroll bar is a very common thing, but some browser comes with the scroll bar is really not very good-looking ah, the following can be used as a learning, to explore the implementation of the custom scroll bar, so that your scroll bar can be Meimei. However, can only play, because only for the WebKit kernel browser ah ah ah Ah!

Overflow introduction

Definition: The Overflow property specifies whether to clip content, render scroll bars, or display content when it overflows its block-level container.

Property value

Overflow:visible    //default value. The content will not be trimmed, beyond the content that appears outside the element box Overflow:hidden     //content will be trimmed. Content is hidden overflow:scroll     //content is clipped and the browser displays a scrollbar to view the rest Overflow:auto       //If the content is trimmed, the browser displays a scroll bar to view the rest of the content. Overflow:inherit     //Specifies that the value of the overflow property be inherited from the parent element

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).

When overflow is set to a value other than the default value (visible), a block-level context (one way to clear the float) is created, and more can be viewed in-depth understanding of BFC and margin Collapse

Small Tips

You can use the property for the processing of the out-of-line text. (You also need to set the width value of the element, as well as the Overflow:hidden; and White-space:nowrap; )

Text-overflow:clip       //Trim text. Text-overflow:ellipsis   //Displays the ellipsis to represent the trimmed text. Text-overflow:string     //uses the given string to represent the trimmed text.

For multiline text, you need to use the nonstandard attribute-webkit-line-clamp, which is not detailed here.

Horizontal and vertical scroll bars

overflow-x scroll bars are used and overflow-y can be set horizontally and vertically, respectively.

Custom scroll bar implementations

This section uses pseudo-classes to change the default style of the scroll bar for the WebKit kernel browser, as detailed below:

Scroll bar Components

1.::-webkit-scrollbar scroll bar integral part
2.::-webkit-scrollbar-thumb The small box inside the scroll bar, can move up and down (or left to right to move)
3.::-webkit-scrollbar-track The track of the scroll bar (with thumb inside)
4.::-webkit-scrollbar-button scroll bar on both ends of the track button due to fine-tuning the position of the small square by clicking.
5.::-webkit-scrollbar-track-piece inner track, scroll bar middle section
6.::-webkit-scrollbar-corner corner, where vertical scroll bar and horizontal scrollbar intersect
7.::-webkit-resizer on the intersection of two scroll bars to drag a small control that resizes the element

The scroll bar consists of the following chart:

Here is an implementation of a simple set of custom scroll bars:

<p class= "box box7" >    <p> This property defines how the content of the overflow element content area will be handled. If the value is scroll, the user agent provides a scrolling mechanism, whether or not it is required. Therefore, it is possible that scroll bars appear even if all the contents of the element box can be dropped. This property defines how the content of the overflow element's content area will be handled. If the value is        scroll, the user agent provides a scrolling mechanism, whether or not it is required. Therefore, it is possible that scroll bars appear even if all the contents of the element box can be dropped.    </p></p>.box8::-webkit-scrollbar {    width:12px;    Background-color: #eee;}. Box8::-webkit-scrollbar-track {    background-color: #eee;}. Box8::-webkit-scrollbar-thumb {    background: #3DB6A4;}. Box8::-webkit-scrollbar-button:start {    background:url (./imgs/up.png) no-repeat;    Background-size:12px 12px;}. box8::-webkit-scrollbar-button:end {    background:url (./imgs/down.png) no-repeat;    BACKGROUND-SIZE:12PX 12px;}

More effects such as:

Note that it is only valid under CHROME!!!!!!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!