Hide vertical scrollbar in iframe

Question

I need to remove vertical scrollbar in an iframe. I have tried using overflow: hidden; still not working. Please help.

How it looks now

Code:

#iphone4 {
background-image: url("ipad_new2.png");
background-repeat: no-repeat;
height: 900px;
width: 750px;
margin: auto ;
position: relative;
overflow: hidden;
}


/*Mobile iframe CSS*/
iframe {
height: 700px;
width: 525px;
position: absolute;
top: 68px;
margin: auto ;
left: 61.99px;
overflow-y: scroll;

}

</style>
</head>
<body>
 <div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>

</body>
</html>

@G.L.P. From the OP's question: " I have tried using overflow: hidden; " — Pimmol, Mar 31 '16 at 12:30
but op didnt mentioned, tried hidden for iframe.. that's why asked — G.L.P, Mar 31 '16 at 12:31
There are some alternatives here: http://stackoverflow.com/questions/10082155/remove-scrollbar-from-iframe — Rodrigo Leite, Mar 31 '16 at 12:31
I suggest you to see this answer: http://stackoverflow.com/questions/4856746/hide-horizontal-scrollbar-on-an-iframe (is the same for vertical scrollbar) — Maurizio Battaghini, Mar 31 '16 at 12:34
I tried ::-webkit-scrollbar { display: none; } and its working in chrome. But in IE its not working. also iframe{ overflow:hidden; } is not. — Hrushi Patil, Mar 31 '16 at 12:35

score 10 · Answer 1 · edited May 23 '17 at 12:07

10

overflow isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.

A current solution would be to combine the two:

<iframe src="" scrolling="no"></iframe>

iframe { overflow:hidden; }

check This

edited May 23 '17 at 12:07

Community

1
1

answered Mar 31 '16 at 12:36

Amitesh Kumar

3,051
1
26
42

1

locks the scrollings, I want it to scroll without being scroll bar shown in IE – Hrushi Patil Mar 31 '16 at 12:41
1

Here there is an example of how to scroll without show the scrollbar, maybe it helps you: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – Rodrigo Leite Mar 31 '16 at 12:46
1

works fine if to set 100% height, I did it by css: height: 100vh; – realmag777 Jun 26 '20 at 11:04

score 2 · Answer 2 · answered Mar 31 '16 at 12:48

2

I think it'll help please check below mentioned link:

<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>

/*Mobile iframe CSS*/
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
margin: auto ;
left: 0;
border:none;
}
body{margin:0px;}

https://jsfiddle.net/xnt014a8/2/

answered Mar 31 '16 at 12:48

Dharmendra Bisht

290
1
5

`seamless` is not a valid attribute. – untill Oct 19 '20 at 11:09

score 0 · Answer 3 · answered Oct 05 '22 at 15:01

You can't really remove vertical scrollbar if you have dynamic content in your iframe using any css property.

You can refer this answer to set height dynamically at load time. If your content inside iframe is constantly changing then you have to use something like MutationObserver and the pass the resize function as an callback defined in the linked answer.

score -2 · Answer 4 · answered Mar 31 '16 at 12:30

-2

you could try

iframe{scrolling="no"}

answered Mar 31 '16 at 12:30

Bomskie

171
8

1

This should be posted as `comment`. Read here http://stackoverflow.com/help/how-to-answer :) – node_modules Mar 31 '16 at 12:31

Hide vertical scrollbar in iframe

4 Answers4