Menu
I have an iframe on a page with another page inside it. I want to hide the scrollbar but i can't find any solution for this.
I have tried with overflow: hidden; but it's not working.
See Below Code:
<iframe frameborder="0" src="https://google.com/"></iframe>
CSS Code:
iframe{
overflow: hidden;
}
228
The second fiddle only scrolls horizontally, you can hold shift and then use mouse scroll to go left and right. I have also tested this in chrome and it works fine for me.
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
A simpler way is however, is to use a container div styled with overflow: hidden; to hide the scrollbar. Set the width and the height of the div, to be slightly less than that of your iframe. Hope this helps you.
Since you didn't specify if you need a solution for the vertical or horizontal overflow, I am assuming you are talking about the vertical one.
This can be done with the help of the parent div.
1.Set the overflow of the parent div as hidden. 2. Set the overflow of the child div to auto and the width 200% (or anything more than 100%, or more than the width of the parent - so that the scrollbar gets hidden).
.container {
width: 300px;
overflow: hidden;
}
.child {
width: 200%;
height: 200px;
overflow: auto;
}
jsfiddle
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
