Home > Web Front-end > Front-end Q&A > How to set scroll bar

How to set scroll bar

藏色散人
Release: 2023-01-03 09:28:01
Original
20044 people have browsed it

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.

How to set scroll bar

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方向*/
Copy after login

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;
}
Copy after login

Rendering:

How to set scroll bar

##[Recommended learning:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template