Introduction to how to set DIV scroll bar properties and styles

DIV scroll bar uses the DIV tag to embed the CSS style sheet inside. When the content of the area defined by the div reaches a certain level, embed the CSS style sheet in the div tag, define the overflow attribute value, and set the DIV scroll bar. related properties.

Here is a description of the p scroll bar properties and style settings. The so-called p scroll bar uses the p tag to embed the CSS style sheet inside and add the overflow attribute value. In this way, when the area specified by p When the content inside reaches a certain level, the scroll bar comes in handy.

p scroll bar attributes and style settings

The so-called p scroll bar uses the p tag to embed the CSS style sheet inside and add the overflow attribute value , In this way, when the content in the area regulated by p reaches a certain level, the scroll bar will come in handy. Its function is probably to save page space, which is the so-called "shrinking the space".

When the content of the area defined by p reaches a certain level, embed the css style sheet in the p tag, define the overflow attribute value, and set the attributes related to the p scroll bar.

Sample code:

<styletylestyletyle="text/css"> 
.testDiv{  
border-style:solid;  
border-width:50px;  
border-color:pink;  
 
position:absolute;  
top:200px;  
left:300px;  
height:200px;  
width:300px;  
 
overFlow-x:scroll;  
overFlow-y:hidden;  
 
scrollBar-face-color:green;  
scrollBar-hightLight-color:red;  
scrollBar-3dLight-color:orange;  
scrollBar-darkshadow-color:blue;  
scrollBar-shadow-color:yellow;  
scrollBar-arrow-color:purple;  
scrollBar-track-color:black;  
scrollBar-base-color:pink;  
 
}  
 
</style>

Note:

1.overFlow:

visible save value , there is no p scroll bar, the size of the area is automatically expanded according to the content, that is, the defined area is invalid

Scroll always displays the scroll bar

hiddenThere is no scroll bar, and the content beyond the area is not visible

auto automatically determines whether to add a scroll bar based on the content

2.pScroll bar color attribute:

face-color: slider color

hightlight-color：Highlight color

3dlight-color：Three-dimensional light color

darkshadow-color：Dark shadow color

shadow-color：Shadow color

arrow-color: Arrow color

track-color: Slide color

base-color: pThe main color of the scroll bar, which contains the scroll button and scroll slider

3.overFlow-xoverFlow-y

visible is an omitted value, there is no p scroll bar, and the size of the area is automatically expanded according to the content, that is, the defined area is invalid

scroll always displays scroll bars

hidden has no p scroll bar, and the content beyond the area is not visible

auto automatically determines whether to add scroll bars based on the content

1. Experts explain what p means?

2. JavaScriptDynamic creation of p attributes and styles

3. The difference between SPAN elements and p elements

4. Usage of page-break-after attribute in CSS2.0

5. Explore the difference between border:none; and border:0; in CSS

Summary:

This article describes to you the properties and style settings of the p scroll bar. The so-called p scroll bar uses the p tag. , embed a CSS style sheet in it, and add the overflow attribute value. In this way, when the content in the area regulated by p reaches a certain level, the scroll bar will come in handy.

Related recommendations:

Analysis of CSS control scroll bar style

Detailed example of CSS3 custom scroll bar style

CSS example of setting div scroll bar style

The above is the detailed content of Introduction to how to set DIV scroll bar properties and styles. For more information, please follow other related articles on the PHP Chinese website!