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
How to remove scrollbar from iframe
3
Do you want to know how you can remove the scrollbar from an iframe? In this article, you …
asked
Apu
3 answers
2915
Do you want to know how you can remove the scrollbar from an iframe? In this article, you …
Answer Link
answered
Apu
<iframe scrolling="no" frameborder="0" style="height: 200px; overflow:scroll; width: 100%" src="https://example.com"></iframe>
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>
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=