How to show iframe scrollbars only on mouseover ?

[MichaelHGoebel]

I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display

I am using the following code for the iFrame but believe that I need to add some script to make it work:

<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"
</iframe>

[harbingerOTV]

<style type="text/css">
.scroll { overflow: auto; }
.noscroll { overflow: hidden; }
</style>
<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" onmouseover="this.className='scroll'" onmouseout="this.className='noscroll'" class="noscroll">
</iframe>

[MichaelHGoebel]

Thankyou so much :-)

[Philip M]

Originally Posted by harbingerOTV

<style type="text/css">
.scroll { overflow: auto; }
.noscroll { overflow: hidden; }
</style>
<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" onmouseover="this.className='scroll'" onmouseout="this.className='noscroll'" class="noscroll">
</iframe>

Does not work in IE9.

[Calvert Tripesi]

Originally Posted by MichaelHGoebel

I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display

IE doesn't seem to style overflow for iframes; perhaps for security reasons.
This works for same-domain iframes. Don't style overflow:hidden using CSS.

<iframe id='myIframe' src='iframesource.htm' ></iframe>

<script type='text/javascript'>

(function( id )
{
  function noBars( elem, action )
  {
    try
    {   
      elem.contentWindow.document.body.style.overflow = ( action ? 'hidden' : 'auto' );  
    }
    catch( e ){}
  }

  var ifr = document.getElementById( id );

  ifr.onload = function(){ noBars( ifr, true ); };

  ifr.onmouseover = function(){ noBars( ifr, false ); }

  ifr.onmouseout  = function(){ noBars( ifr, true ); }

})( "myIframe" ); 

</script>

[Philip M]

Originally Posted by Calvert Tripesi

IE doesn't seem to style overflow for iframes; perhaps for security reasons.
This works for same-domain iframes. Don't style overflow:hidden using CSS.

But only for same-domain iframes.