How to implement CSS3 custom scroll bar style

This article mainly introduces the sample code of CSS3 custom scroll bar style. The content is quite good. I will share it with you now and give it as a reference.

Scroll bars are a very common thing, but the scroll bars that come with some browsers are really not very good-looking. The following can be used as a study to discuss the implementation of custom scroll bars, so that your scroll bars It can be beautiful. However, I can only play for fun, because it is only for browsers with webkit core!

overflow introduction

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

Attribute value

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

Note: Any version of Internet Explorer (including IE8) does not support attribute value "inherit".

When overflow is set to a value other than the default value (visible), a block-level formatting context (a way to clear floats) will be created. For more information, see In-depth Understanding of BFC and Margin Collapse

Tips

For processing the excess part of the current line of text, you can use the following attributes. (At the same time, the width value of the element needs to be set, as well as overflow:hidden; and white-space:nowrap;)

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

Needed to be used for multi-line text Non-standard attribute - webkit-line-clamp, which will not be discussed in detail here.

Horizontal and vertical scroll bars

Use overflow-x and overflow-y to set the horizontal and vertical directions respectively scroll bar on.

Custom scroll bar implementation

This part is for browsers with webkit core, using pseudo classes to change the default style of the scroll bar. The details are as follows:

rolling bar component part of

# 1. :: -webkit-Scrollbar rolling bar overall parts
2. :: -webkit-Scrollbar-THUMB rolling bar, Can move up and down (or left or right)
3. ::-webkit-scrollbar-track           The track of the scroll bar (with Thumb inside)
4.     ::-webkit-scrollbar-button                                          The buttons at the ends of the bar track allow you to fine-tune the position of the small squares by clicking on them.
5. ::-webkit-scrollbar-track-piece The inner track, the middle part of the scroll bar
6. ::-webkit-scrollbar-corner The corner, where the vertical scroll bar and the horizontal scroll bar intersect
7. :: -WEBKIT-ResIZER two rolling bars are used to drag the small controls of the size of the element

rolling bar. The structure diagram is as follows:

The following is a set of simple custom scroll bar implementations:

<p class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </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 are as shown below:

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of the @font face rules of CSS3

How to use CSS to realize the mouse hovering mask Cover

The above is the detailed content of How to implement CSS3 custom scroll bar style. For more information, please follow other related articles on the PHP Chinese website!