How to set scroll bar

How to set the scroll bar: 1. Use the overflow attribute to set whether the scroll bar appears, code such as "overflow:scroll"; 2. Use the scrollbar attribute to set the scroll bar style.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to set the scroll bar using css

1. We can use the overflow attribute to set whether the scroll bar appears

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

When the block-level content area exceeds When the block-level element is within the scope, it will be displayed in the form of a scroll bar. You can scroll the content inside, and the content inside will not exceed the block-level area.

2. Use the scrollbar attribute to set the scroll bar style

::-webkit-scrollbar The overall part of the scroll bar

::-webkit-scrollbar-button The buttons at both ends of the scroll bar

::-webkit-scrollbar-track Outer track

::-webkit-scrollbar-track-piece Inner track, middle part of scroll bar (removed)

::-webkit-scrollbar-thumb The one that can be dragged in the scroll bar

::-webkit-scrollbar-corner The corner

::-webkit-resizer defines the drag block in the lower right corner Style

Example:

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

Rendering:

css video tutorial]

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