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 9 · Answer 1 · edited May 23 '17 at 12:07

9

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

2,983
23
41

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 -2 · Answer 3 · answered Mar 31 '16 at 12:30

-2

you could try

iframe{scrolling="no"}

answered Mar 31 '16 at 12:30

Bomskie

171
8

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

3 Answers3