Tuesday, November 1, 2011

Hide scrollbar in an iframe (but retain scrolling functionality)?

I know that you can hide the scrollbar in an iframe, but this also disables the ability to scroll, say with a scrollmouse.

===
Method 1:

You can use a container div styled with overflow: hidden; to hide the scrollbar.
<div style='width: 500px; height: 120px; overflow: hidden;'>
<iframe style='width: 518px; height: 120px;' src='index.php'></iframe>
</div>

It ends up cutting off the right border, if you have a border around the iframe, but beyond that, should do what you need.

Method 2:
/* to disable iframe horizontal scrollbar */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

Reference:
http://arstechnica.com/civis/viewtopic.php?f=20&t=271134

No comments: