Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

user_139993 0
Viewed 100324

I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).

I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.

On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).

How do I hide the scrollbar for webkit browsers?

safari webkit iframe scrollbar css
17 Answers

To get rid of the greyed out scroll bars, put "overflow: hidden;" on the body tag of the page being displayed in the Iframe e.g. <body style="overflow:hidden;"> This worked fine for me in Chrome 8.0.552.215 and I also had "overflow: hidden" on the Iframe itself

user_5354160

Does this help? Works on Chrome, IE, FF...

<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>

<body scroll="no">
<div id="test">content</div>
</body>
user_2515340

check if the scroll is realy from the iframe, maybe it's from the HTML or BODY.

For scroll in iframe 

<iframe scrolling="no">

In css

iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}
user_2360090
user_5542230

Do not use scrolling tag at-all on the iframe and add the style as style="overflow-x:hidden;overflow-y:auto;" this will remove the horizontal scroll and it should work the other way round too.

user_2360520
Related