How to set scroll bar
Mar 05, 2021 am 10:49 AMHow 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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Microsoft brings Windows 11's Fluent scrollbars to Google Chrome

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 write HTML scroll bar text box code

Chrome is coming to Windows 11-style overlapping scrollbars

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