SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, it works fine. I searched the web but couldn't find a clear sample such as yours.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •