Removing vertical scrollbar in iframe

Hi,

I am trying to remove the vertical scrollbar in my iframe but I also want the iframe to be vertically scrollable with the mousewheel.

<iframe src="http://www.mysite.com/" [B]scrolling="no"[/B] ></iframe>

seems to remove the scrollbar in all browsers but it also disables scrolling with the mousewheel. Any ideas how to do what I want?

Thanks.

Hi,

There are lots of posts to be found online about disabling scrolling in the iframe, then using JavaScript to capture mouse events or key strokes, then to scroll accordingly.
A simpler way is however, is to use a container div styled with overflow: hidden; to hide the scrollbar. Set the width and the height of the div, to be slightly less than that of your iframe.

For example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hide iframe scrollbars</title>
    <style>
      #container{width: 500px; height: 300px; overflow: hidden;}
      iframe{width: 518px; height: 318px;}
    </style>
  </head>
  
  <body>
    <div id="container">
      <iframe src="myIframe.html"></iframe>
    </div>
  </body>
</html>

Hope this helps you.

Thanks a lot, it works fine. I searched the web but couldn’t find a clear sample such as yours.

GREAT answer - simple, clear and it works. I searched through a lot of other non-working answers before i ran across this one. THANKS!