Removing vertical scrollbar in iframe

**nayen** · Oct 19, 2012 03:23

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.

Code:

<iframe src="http://www.mysite.com/" scrolling="no" ></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.

**Pullo** · Oct 19, 2012 15:01

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:

Code HTML:

<!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.

**nayen** · Oct 21, 2012 07:51

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

User Tag List

Thread: Removing vertical scrollbar in iframe

Thread Tools

Display

Hybrid View

Removing vertical scrollbar in iframe

Bookmarks

Bookmarks

Posting Permissions