CSS3 Custom scroll bar Styles

Write in front

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    //默认值。内容不会被修剪，超出内容会显示在元素框之外overflow:hidden     //内容会被修剪。超出内容被隐藏overflow:scroll //内容会被修剪，浏览器会显示滚动条以便查看其余内容overflow:auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。overflow:inherit //规定从该父元素继承overflow属性的值

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 will 块级式化上下文 (one way to clear the float) will be 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, plus overflow:hidden; white-space:nowrap; )

text-overflow:clip       //修剪文本。text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。text-overflow:string //使用给定的字符串来代表被修剪的文本。

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

Horizontal and vertical scroll bars
overflow-xscroll 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 scroll bar inside the small box, can move up (or left to right) 3. ::-webkit-scrollbar-track the track of the scroll bar (with thumb inside) 4. ::-webkit-scrollbar-button The scroll bar tracks the ends of the buttons, due to the position of the small squares by tapping the trimmer. 5. ::- Webkit-scrollbar-track-piece inner track, scroll bar middle part 6. ::-webkit-scrollbar-corner corner, where the vertical scroll bar intersects the horizontal scrollbar 7. ::-webkit-resizer two scroll bars at the intersection of a small control that is used to drag the resizing of an element    

The scroll bar consists of the following chart:

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

        <div class= "box box7" ><p> 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. 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></div>.box8::-webkit-ScrollBar {Width12px; 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!!!!!!

CSS3 Custom scroll bar Styles