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

Question

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

It should be possible to hide the scrollbar and still be able to scroll? @ssc-hrep3 — Mathias Hermansen, Jan 13 '17 at 23:19
Check out http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — ssc-hrep3, Jan 13 '17 at 23:21
Possible duplicate of [Hide scroll bar, but still being able to scroll](http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) — benomatis, Jan 13 '17 at 23:26
Possible duplicate of [Remove scrollbar from iframe](http://stackoverflow.com/questions/10082155/remove-scrollbar-from-iframe) — Anthony, Jan 14 '17 at 08:40
Sometimes this doesn't work, you should add a width property to the frame same as the parent container of the frame, for my case, I want the frame to cover the whole body of my page, so I did: ``iframe{ overflow: hidden; width:100vw !important; } `` and it got rid of the horizontal and vertical scrollbars leaving only one vertical scroll bar — briancollins081, Apr 02 '20 at 10:24

score 1 · Answer 1 · answered Aug 17 '17 at 12:55

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

answered Aug 17 '17 at 12:55

aliengirl a.k.a. alien no.155

123
2
11

Yes but also you hide the content. – Hasip Timurtas Oct 14 '20 at 07:57
1

This solution does not hide the scrollbar for me... – Binyomin Jun 10 '21 at 21:21
man, that didn't work for me – megaultron Mar 28 '22 at 23:41
the question has to do with iframe and in jsfiddle I don't see iframe, just for that I will give -1 – megaultron Mar 28 '22 at 23:42

score -2 · Answer 2 · answered Jan 19 '18 at 17:39

-2

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>

answered Jan 19 '18 at 17:39

Sasha Bond

984
10
13

1

Setting scrolling="no" prevents scrolling – Pupper Oct 15 '19 at 19:46

score -3 · Answer 3 · answered May 18 '17 at 21:57

-3

For Webkit only, try adding:

::-webkit-scrollbar {
    display: none;
}

answered May 18 '17 at 21:57

Myles O'Connor

190
1
3

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

3 Answers3

Linked