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

How to set scroll bar

Mar 05, 2021 am 10:49 AM
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.

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!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Microsoft brings Windows 11's Fluent scrollbars to Google Chrome Microsoft brings Windows 11's Fluent scrollbars to Google Chrome Apr 14, 2023 am 10:52 AM

Microsoft brings Windows 11's Fluent scrollbars to Google Chrome

How to hide scroll bar scrolling in react How to hide scroll bar scrolling in react Dec 21, 2022 pm 03:38 PM

How to hide scroll bar scrolling in react

How to set the scroll bar to always show on Mac system - How to set the scroll bar to always show How to set the scroll bar to always show on Mac system - How to set the scroll bar to always show Mar 18, 2024 pm 06:22 PM

How to set the scroll bar to always show on Mac system - How to set the scroll bar to always show

How to write HTML scroll bar text box code How to write HTML scroll bar text box code Feb 19, 2024 pm 07:38 PM

How to write HTML scroll bar text box code

How to make html scroll bar How to make html scroll bar Feb 22, 2024 pm 03:24 PM

How to make html scroll bar

Chrome is coming to Windows 11-style overlapping scrollbars Chrome is coming to Windows 11-style overlapping scrollbars Apr 23, 2023 pm 06:40 PM

Chrome is coming to Windows 11-style overlapping scrollbars

How to set html scroll bar style How to set html scroll bar style Oct 11, 2023 am 10:08 AM

How to set html scroll bar style

How to enable or disable scroll bars always showing in Windows 11? How to enable or disable scroll bars always showing in Windows 11? Apr 24, 2023 pm 05:58 PM

How to enable or disable scroll bars always showing in Windows 11?

See all articles