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>

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;


No comments: