How to hide scrollbar in iframe, but still be able to scroll
18,527
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;
}
Author by
Mathias Hermansen
Updated on June 11, 2022Comments
-
Mathias Hermansen almost 2 years
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; }
-
Pupper over 4 yearsSetting scrolling="no" prevents scrolling
-
Hasip Timurtas over 3 yearsYes but also you hide the content.
-
Binyomin almost 3 yearsThis solution does not hide the scrollbar for me...
-
megaultron about 2 yearsman, that didn't work for me
-
megaultron about 2 yearsthe question has to do with iframe and in jsfiddle I don't see iframe, just for that I will give -1