Remove and retain the iframe scroll bar.

Remove and retain the iframe scroll bar.

After an iframe is embedded into a page, we sometimes need to adjust the scroll bar. For example, we need to remove all the scroll bars, remove the scroll bar on the right, keep the scroll bar on the bottom, remove the scroll bar on the bottom, and keep the scroll bar on the right. So what should we do?

I. Remove all the scroll bars.

The first method: iframe has a scrolling attribute, which has three values: auto, yes, and no.

Scrolling: auto ----- the scroll bar appears when necessary

Scrolling: yes ------ always display the scroll bar

Scrolling: no ------- always hide the scroll bar

When scrolling: no is set, no scroll bars are available.

Method 2: I found that apart from scrolling, you can remove all the scroll bars. In addition, you can set body {overflow: hidden} on the embedded page. In this way, you can also remove the scroll bar, this is also the attribute used when we only want to remove a scroll bar.

 

2. Remove the scroll bar on the right and keep the scroll bar under it.

If you only want to keep the scroll bar below, you can set body {overflow-x: auto; overflow-y: hidden;} in the embedded page ;}

 

3. Remove the scroll bar and keep the scroll bar on the right.

Set body {overflow-x: hidden; overflow-y: auto;} on the embedded page ;}

We already know that both attributes can be set to display and hide the scroll bar. What effect will happen when both attributes are set at the same time?

Through detection, I found that when scrolling = "auto" or "yes", if the body is set, the settings in the body will be used; When scrolling = "no, no matter what the body is set, scrolling settings are used, that is, all the scroll bars are removed.