Teach you how to create scroll bar styles in iframe tags, and introduce the usage of iframe tags

This article mainly talks about the scrolling issues in HTML iframe tags. This article writes about the removal and preservation of the scroll bars of iframe tags and solving the problems of double scroll bars after the iframe with dynamic height is loaded. , let us read the article now

First let us take a look at the removal and preservation of scroll bars in the HTML iframe tag:

After the iframe is embedded in the page, we Sometimes it is necessary to adjust the scroll bars, for example, remove all scroll bars, remove the right scroll bar and keep the bottom scroll bar, remove the bottom scroll bar and keep the right scroll bar. So what should we do?

1: Remove all 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 needed

scrolling : yes ------Always display the scroll bar

scrolling : no - ------Always hide scroll bars

When scrolling: no is set, all scroll bars will be gone.

Second method: I found that in addition to scrolling to remove all scroll bars, there is another method, setting body{overflow:hidden} in the embedded page, so that the scroll bars can also be removed. And this is also the property used when we only want to remove a certain scroll bar.

Two: Remove the right scroll bar and keep the bottom scroll bar

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

Three: Remove the bottom scroll bar and keep the right scroll bar

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

We already know that these two properties can set the display and hiding of the scroll bar, so when both are set at the same time, which one will appear? What's the effect?

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 is set in the body , the scrolling setting will be used, that is, all scroll bars will be removed.

Next let’s talk about how to remove the horizontal scroll bar:

It can be removed by the following method: In the web page contained in the iframe Add

<style>
html { overflow-x:hidden; }
</style>

to remove the horizontal scroll bar, and you can also use the same method to remove the vertical scroll bar.

Solve the problem of double scroll bars after loading an iframe with dynamic height:

If the iframe data is loaded asynchronously through ajax, the height of the div inside is also dynamically obtained. There is a problem here. When the content in the div is not loaded, the above var height can only obtain the unexpanded height. After loading ajax, the actual height still cannot be obtained. Here, you need to wait until all document trees are loaded before loading. How to get the actual height

Ultimate version, written on the iframe page

var ht = setInterval('getHeight',100);
function getHeight(){
    if(document.readyState == 'complete'){
        var height = (document.body.scrollHeight)+'px';
        $('parentdiv',window.parent.document).css('height',height);
        window.clearInterval(gh);
    }
}

There may be a simpler solution, but this is the idea and code that I encountered and solved step by step. It is worth it Record it. Of course, the scrolling attribute can also be used. You can study it. If you have any simple methods, we can discuss it together. Welcome to leave a message below

[Editor’s recommendation]

How to write a relative path for the base tag in HTML? (Introduction to use included)

What is the usage of the src attribute of the HTML img tag? Analysis of specific usage methods (examples attached)

The above is the detailed content of Teach you how to create scroll bar styles in iframe tags, and introduce the usage of iframe tags. For more information, please follow other related articles on the PHP Chinese website!