SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    281
    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,312
    Mentioned
    178 Post(s)
    Tagged
    8 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
    281
    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
  •