How to add scroll bar in css

In CSS, you can use the overflow attribute to set the scroll bar. You only need to add the "overflow:scroll" style to the element. This property defines how content that overflows the element's content area is handled. If the value is scroll, the user agent provides a scrolling mechanism whether required or not.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

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

This attribute defines how content that overflows the content area of ​​the element will be processed. If the value is scroll, the user agent provides a scrolling mechanism whether required or not. Therefore, it is possible that scrollbars will appear even if everything fits inside the element box.

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

overflow-y: Set how to manage content when the content of an object exceeds its specified height;

overflow-x: Set how to manage content when the content of an object exceeds its specified width

Parameters:

visible: Expand the area to display all content

auto: Add scroll bars only when the content exceeds the limit value

hidden: Always hide scrolling Bar

Scroll: Always display the scroll bar

When the block-level content area exceeds the scope of the block-level element, it will be displayed in the form of a scroll bar. You can scroll the content inside. The content will not exceed the scope of 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 The outer track

• ::- webkit-scrollbar-track-piece The inner track, the middle part of the scroll bar (removed)

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

• ::-webkit-scrollbar-corner Corner

• ::-webkit-resizer Defines the style of the drag block in the lower right corner

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;
}

Recommended learning:css video tutorial

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