By default, when there are many Web pages, the web browsers will automatically display the scroll bar. In some cases, we do not want to display the scroll bar. Here we will teach you some code, you can remove the horizontal scroll bar, vertical scroll bar, and all the overall scroll bars. These codes are mainly added after the <body> tab of the page:
Let's see how to remove the scroll bar.
The scroll bar style mainly involves the following CSS attributes:
Overflow attribute: retrieves or sets how to display content when the content of an object exceeds its specified height and width.
Overflow: auto; the scroll bar is automatically added when necessary.
Overflow: scroll; always displays the scroll bar
Overflow-x: hidden; disable horizontal scroll bars
Overflow-y: scroll; always displays the vertical scroll bar
Remove the scroll bar in the vertical direction (up and down:
| The code is as follows: | Copy code |
<Body style = "overflow: scroll; overflow-y: hidden"> webpage body </body> |
|
Remove the scroll bar in the horizontal direction (left and right:
| The code is as follows: | Copy code |
<Body style = "overflow: scroll; overflow-x: hidden"> webpage body </body> |
|
If neither horizontal nor vertical is required, it is simpler:
| The code is as follows: | Copy code |
<Body scroll = "no"> </body> |
|
This code has been tested in IE8 and is fully available. It also takes effect in Firefox and chrome, which is quite good.
The following code defines the scroll bar style:
| The code is as follows: | Copy code |
<STYLE> |
|
Note: If you have code similar to this on the top of your static page <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">. Please delete this code or delete the BODY {...} Change to HTML {...} The scroll bar effect is visible.
Iframe remove the scroll bar
About <iframe>
You can remove the two scroll bars of iframe by setting the attribute scrolling = "no.
How can I remove a horizontal or vertical scroll bar? Some webpage components can remove a horizontal or vertical scroll bar by setting overflow-x: Den or overflow: hidden of the style attribute of the component. But does not work for iframe.
You can remove it using the following method:
Add
| The code is as follows: | Copy code |
<Style> |
|
You can remove the horizontal scroll bar or remove the vertical scroll bar in the same way.
Of course, there is another way to directly add a label scrolling = no in iframe.
1st forms:
| The code is as follows: | Copy code |
| <Iframe src = "13/05. html" frameborder = 0 marginheight = 0 marginwidth = 0 scrolling = no width = 446 height = 296> </iframe> | |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
