Question

[Solved] How to hide scrollbar in iframe, but still be able to scroll

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;
    }     

Solution #1:

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

Solution #2:

For Webkit only, try adding:

::-webkit-scrollbar {
    display: none;
}
Respondent: Myles O’Connor

Solution #3:

not sure if this possible with css for iframe only, but you can use scrolling=’no’

<iframe frameborder="0" scrolling="no" src="https://google.com/"></iframe>
Respondent: Sasha Bond

Solution #4:

Just use this simple css code it will hide scrollbar

body {
overflow: hidden;
}
html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

Respondent: ajmirani

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy