Application of HTML tag overflow processing

Time:2021-6-10

Use CSS to decorate scroll bar
1. Overflow content overflow settings

Settings for overflow-x horizontal content overflow
Settings for overflow-y vertical content overflow
The values of the above three attributes are visible (default), scroll, hidden and auto.

2. Scrollbar-3d-light-color
Scroll arrow color the color of the triangle arrow on the up and down buttons
Scroll bar base color
Scrollbar dark shadow color
Scroll bar face color
Scroll bar highlight color
Scrollbar shadow color
The values set by the above seven attributes are all color values, which can be expressed in various ways defined by the style sheet.

Using the above style definition content, we can specify the display and color style of the scroll bar of the browser window and multiline text box. The first group of style attributes is used to set whether the scroll bar is displayed on the set object, and the second group of style attributes is used to set the color of the scroll bar. It should be noted that the style attributes mentioned in this article are supported by ie, The second group of style attributes can only be supported by ie5.5, so please pay attention to it when debugging.

We use several examples to explain the above style properties

1. Make the browser window never appear scroll bar
There is no horizontal scroll bar
<body style= “overflow-x:hidden “>
There is no vertical scroll bar
<body style= “overflow-y:hidden “>
There is no scroll bar
<body style= “overflow-x:hidden; Overflow-y: hidden “> or < body style =” overflow:hidden “>

2. Set the scroll bar of the multiline text box
There is no horizontal scroll bar

Copy code

The code is as follows:

<textarea style= “overflow-x:hidden “> </textarea>

There is no vertical scroll bar

Copy code

The code is as follows:

<textarea style= “overflow-y:hidden “> </textarea>

There is no scroll bar

Copy code

The code is as follows:

<textarea style= “overflow-x:hidden;overflow-y:hidden “> </textarea>

or

Copy code

The code is as follows:

<textarea style= “overflow:hidden “> </textarea>

3. Set the color of the window scroll bar
Set the color of the window scroll bar to red < body style = “scroll base- color:red “>
Scrollbar base color sets the basic color. Generally, you only need to set this property to change the color of the scroll bar.
With a special effect:

Copy code

The code is as follows:

<body style= “scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon “>

4. When setting other elements, it’s basically the same. You’d better define a class in the style sheet file so that you can reuse it.

Copy code

The code is as follows:

.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}

Add the above statements to the style sheet file or the < style > < / style > in the HTML header, and then use the
<textarea class= “coolscrollbar “> </textarea>