본문 바로가기

Internet World/HTML/CSS

Webkit 기반의 Safari나 Chrome에서 iframe의 스크롤바 제거

요즘에 국내에도 아이폰이 개통되고 또 이번에 아이폰4 또한 나오게 되면서 국내에서도 애플의 인지도가 많이 높아지고 있습니다. 또한 맥을 쓰시는 분들도 많고 그로인해 Webkit 기반의 브라우저인 사파리를 사용하시는 분들 또한 많아졌습니다. 빠르다고 소문이 나있는 사파리와 크롬을 다들 써보셨을 텐데요. iframe을 사용할 때 이상하게 크롬과 사파리에서는 스크롤바가 나오는 현상을 보실 수 있었을 것입니다. 분명히 iframe에 overflow:hidden; 이라는 속성을 주었는데도 스크롤바는 사라지지 않는 것을 볼 수 있습니다. 그래서 검색을 해보았습니다. 그랬더니 이런 결과가 나왔는데요.

I have an iframe on www.mydomain.com that points to support.mydomain.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?

 

overflow:hidden; ???

 

it seems like styling the HTML element to be overflow:hidden inside of a style tag doesn't work -- you need to put it in as a style attribute for the HTML tag (even though that's not valid). So... This: <html style="overflow: hidden;"> <head></head> <body>stuff</body> </html> Not this: <html> <head><style type="text/css"> html { overflow:hidden; } </style></head> <body>stuff</body> </html>


iframe에서 불러오는 파일의 html에 overflow:hidden; 속성을 주어야 한답니다. 그렇게 적용했더니 훌륭하게 작동하는 군요. 혹시나 이 문제 때문에 고생하신 분들은 이 방법을 사용해 보심이 좋을 것 같습니다..


반응형