Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu June 03, 2023 . #css . #HowTo

How to remove scrollbar from iframe

Do you want to know how you can remove the scrollbar from an iframe?

In this article, you will learn how to remove the scrollbar from an iframe using css and also javascript.

Remove scrollbar from iframe using html attribute.

Add scrolling="no" attribute to the iframe to remove the scrollbar. the example is given below.

Example of scrolling attribute.
<iframe scrolling="no" width="300" height="200" src="https://search.3schools.in/p/example.html"></iframe>
Try it Yourself »

Remove scrollbar from iframe using JavaScript.

In this example, we will add the scrolling="no" attribute to the iframe using javascript.

Remove scroll bar from iframe using js
<iframe id="my-iframe" style="width:300px;height:200px;" src="https://search.3schools.in/p/example.html"></iframe>
<button onclick="myFunc()">Remove Scrolling</button>
<script>
 function myFunc(){
  document.querySelector('#my-iframe').scrolling = "no";
 }
</script>
Try it Yourself »
save
listen
AI Answer
3 Answers
  1. Add scrolling="no" attribute to the iframe. 
    <iframe scrolling="no" frameborder="0" style="height: 200px; overflow:scroll; width: 100%" src="https://example.com"></iframe>
    Reply Delete
    Share
  2. When embedding content into a website or web page via an iFrame, there may be some unwanted elements such as extra whitespace or scrollbars that can detract from your overall design aesthetic.
    So, to remove your iframe's scrollbar using HTML and CSS, start by adding scrolling="no" within the opening <iframe> tag like this :
    <iframe src="https://www.example.com" scrolling="no">
    </iframe>

    To completely hide all traces of that pesky bar you need one more line - add overflow: hidden;
    <iframe src="https://www.example.com" style="overflow:hidden;">
    </iframe>
    Reply Delete
    Share
  3. How to create a full screen iframe using css?
    To create a full screen iframe using CSS, you can use the following code:
    <style>
    #myFrame {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        z-index: 999999;
    }
    </style>

    This code will set the iframe to occupy the entire viewport and remove any borders or margins. Additionally, you can set the overflow to hidden to prevent scrollbars from appearing.
    https://www.3schools.in/p/code-editor.html?q=CjxzdHlsZT4gCiBpZnJhbWUgewogICAgcG9zaXRpb246IGZpeGVkOyAKICAgIHRvcDogMDsgCiAgICBsZWZ0OiAwOyAKICAgIGJvdHRvbTogMDsgCiAgICByaWdodDogMDsgCiAgICB3aWR0aDogMTAwJTsgCiAgICBoZWlnaHQ6IDEwMCU7IAogICAgYm9yZGVyOiBub25lOyAKICAgIG1hcmdpbjogMDsgCiAgICBwYWRkaW5nOiAwOwogICAgb3ZlcmZsb3c6IGhpZGRlbjsgCiAgICB6LWluZGV4OiA5OTk5OTk7CiB9Cjwvc3R5bGU+CjxpZnJhbWUgc3JjPSJodHRwczovL2V4YW1wbGUuY29tIj48L2lmcmFtZT4=
    Reply Delete
    Share
Write Your Answer
loading
back
View All